<![CDATA[ Blog OrdiTips ]]> http://www.orditips.com fr copyright 2017 www.orditips.com <![CDATA[ Blog OrdiTips ]]> http://www.orditips.com/images/o/ord/orditips-logo.jpg http://www.orditips.com Fri, 21 Apr 2017 10:08:32 +0100 <![CDATA[ WampServeur 3 - Installation et configuration Rapide sur Windows 10 ]]> http://www.orditips.com/article-120392-wampserveur-3-installation-et-c.html WampServeur-3
© WampServeur

Bonjour à tous,

Récemment, je me suis lancé en quête de réaliser un blog WordPress sur lequel je souhaitais pouvoir travailler en local avant de pouvoir le mettre en ligne. C'est tout naturellement que je me suis tourné vers WampServeur, que je connaissais déjà car, je l'ai souvent utilisé pour certains projets que je constituais en local. je vais vous donner la marche à suivre pour installer comme il ce doit WampServeur 3 sur Windows 10.

Les pré-requis pour installer WampServeur 3 sur Windows 10

En effet, si vous téléchargez WampServeur 3 et que vous l'avez installé sur Windows 10 tel quel, vous vous êtes rendu compte qu'au lancement certains services ne démarrent pas et que par conséquent, Wamp ne fonctionne pas. Il faut donc quelques pré-requis avant d'installer WampServeur 3. Je vais vous expliquer tout ça, il n'y a rien de vraiment bien compliqué.

Désinstaller votre ancienne version de Wamp

Avant tout, si vous êtes en possession d'une ancienne version de Wamp, il faudra la désinstaller . Cela inclus donc de faire un backup de vos projets contenus dans le dossier C:wamp64www. Il faudra également exporter l'ensemble de votre base de données en format .sql via PhpMyAdmin, dans la rubrique export de votre BDD.

Installer les packages Microsoft Visual C ++ nécessaires au fonctionnement de Wamp

C'est la partie un petit peu longue, parce qu'il faut installer les packages Microsoft Visual C++ nécessaires au bon fonctionnement de Wamp et de ses services. On résumera ça comme ça : télécharger, exécuter, installer et télécharger, exécuter, installer (...) Ce n'est pas bien compliqué ^^.

Note : Si vous installer la version 64 bits de Wamp, Il vous faudra installer l'ensemble des packages en 64 Bits, mais aussi ceux en 32 bits ( X86 ), c'est très important !

Visual C++ 2008 SP1
X86 : https://www.microsoft.com/fr-fr/download/details.aspx?id=5582
X64 : https://www.microsoft.com/fr-fr/download/details.aspx?id=2092

Visual C++ 2010 SP1
X86 : https://www.microsoft.com/fr-fr/download/details.aspx?id=8328
X64 : https://www.microsoft.com/fr-fr/download/details.aspx?id=13523

Visual C++ 2012 Update 4
X86 & X64 : https://www.microsoft.com/fr-fr/download/details.aspx?id=30679

Visual C++ 2013
X86 & X64 : https://www.microsoft.com/fr-fr/download/details.aspx?id=40784

Visual C++ 2015
X86 & X64 : https://www.microsoft.com/fr-fr/download/details.aspx?id=48145

Je vous conseille de redémarrer après avoir installé tout ça !

Installation de WampServeur 3

Pour commercer, on télécharge WampServeur 3. Ensuite, On l'installe comme n'importe quel autre programme sous Windows. On lance l'executable, on accepte les conditions, suivant, on laisse le dossier de destination par défaut, ( C'est très important , car il faut obligatoirement qu'il soit à la racine d'un disque et sans espaces,  en l'occurance C:wamp64 dans mon cas ) enfin on clique sur suivant puis installer.

À la fin de l'installation il vous sera demandé quel navigateur souhaitez vous utiliser avec Wamp. Par défaut le choix qui ma été présenté était Edge, Pour ma part je lui préfère Chrome, c'est selon vos goûts hein ;). Pareil pour l'éditeur de texte, le choix par défaut est le Bloc Note Windows. Personnellement j'utilise Brackets pour écrire du code, donc j'ai choisi Brackets :) ( que je vous recommande au passage ). Enfin, il faudra autoriser Apache via le pare-feux Windows. Le choix m'a été proposé directement via une fenêtre pop-up. Si vous utilisez un autre pare-feu, il ce peut que la manipulation soit différente ou qu'aucune fenêtre ne pop, dans ce cas, il faudra donc créer cette règle vous même pour Apache. L'emplacement du fichier programme à autoriser pour Apache : C:wamp64binapacheapache2.4.23binhttpd.exe.

Avant de lancer Wamp serveur 3

Quand il n'y en a plus, il y en a encore ! Juste 3 petites choses en faite.

Désactiver les services ISS Windows 10

Avant de lancer Wamp, vous devez désactiver les services ISS dans Windows 10.

Pour cela, taper cmd dans la barre de recherche du menu démarrer de Windows 10, clique droit sur l'invite de commande, exécuter en tant qu'administrateur. Une fois dans l'invite de commande, taper la commande suivante :

net stop was /y

À ce moment là, les services ISS sont stoppés. Il sera cependant nécessaire de réitérer l'opération à chaque fois que vous redémarrez votre ordinateur, car les services ce réactiveront au démarrage du PC.

Couper les services Skype

Skype utilisant le même port que Apache ( 80 ), il faudra stopper l'application afin que Wamp puisse fonctionner.

Donc toujours dans la console en admin :

taskkill /f /im SkypeApp.exe & taskkill /f /im SkypeHost.exe

À ce moment là, l'ensemble des services ISS et Skype sont stoppés.

Importer vos projets et votre base de données dans Wamp Serveur 3

Si vous aviez fait un backup de votre dossier www, c'est le moment de le recopier dans le dossier C:wamp64www. Une fois ceci fait vous pouvez lancer WampServeur 3. Si vous avez suivi toutes les étapes de ce tutoriel, alors vous devriez voir dans la barre des taches de windows,  l'icone Wamp de couleur verte, ce qui signifie que tout fonctionne correctement.

Pour importer votre base de données, cliquez gauche sur l'icone Wamp, vous devriez voir apparaître un menu. Cliquez sur PhpMyAdmin. Une page s'ouvre dans le navigateur choisi lors de l'installation, donnant sur l'interface de PhpMyAdmin. Le login par défaut est root sans mot de passe. Même si vous travaillez en local, rien ne vous empêche de changer de mot de passe. Pour importer votre BDD, il suffit de ce vous rendre dans l'onglet import et de suivre les instructions pour votre BDD.

Pour lancer un de vos projets, il suffit de taper dans la barre d'adresse du navigateur http://127.0.0.1/nom-du-projet
Vous pouvez sinon  cliquez gauche sur l'icone Wamp puis sur LocalHost. Vous arriverez sur la page de d'accueil de Wamp.

Un script pour automatiser la fermeture des services ISS et Skype au lancement de Wamp Serveur 3

Bon, comme je suis sympa, plutôt que de lancer l'invite de commande à chaque fois que vous redémarrez votre ordinateur et donc Wamp, j'ai assemblé ce petit script qui effectue toutes les taches concernant l' arrêt des différents services.

Il suffit de le lancer et hop, les services ISS et Skype sont stoppés, et WampServeur 3 démarre juste après.

@echo off
:: On execute les commandes en administateur

:-------------------------------------
REM  -->  Verification des permissions
>nul 2>&1 "%SYSTEMROOT%system32cacls.exe" "%SYSTEMROOT%system32configsystem"

REM --> Erreur vous ne possedez pas les droits admin
if '%errorlevel%' NEQ '0' (
    echo Verification des privileges administrateur
    goto UACPrompt
) else ( goto gotAdmin )

:UACPrompt
    echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%getadmin.vbs"
    set params = %*:"="
    echo UAC.ShellExecute "%~s0", "%params%", "", "runas", 1 >> "%temp%getadmin.vbs"

    "%temp%getadmin.vbs"
    exit /B

:gotAdmin
    if exist "%temp%getadmin.vbs" ( del "%temp%getadmin.vbs" )
    pushd "%CD%"
    CD /D "%~dp0"
:--------------------------------------
echo STOP IIS...
net stop was /y
echo IIS stopped
echo stop SkypeApp
taskkill /f /im SkypeApp.exe & taskkill /f /im SkypeHost.exe
echo SkypeApp stopped
echo start Wamp Serveur 3
cd "c:wamp64"
Start wampmanager.exe
echo Wamp Serveur 3 Started
exit

Pour détailler l'action du script :

- Ouverture de l'invite de commande
- Vérification des droits administrateurs ; il faudra valider par oui à ce moment là, car il est nécessaire d'avoir les privilèges admin pour stopper les services ISS. je vous renvoie vers le blog electrogen où j'ai trouvé cette partie du script ( Merci ! ).
- Stopper les services ISS
- Stopper les services Skype
- Ouvrir WampServeur 3
- Fermer l'invite de commande

C'est simple et efficace :)

Si vous le copiez tel quel dans un éditeur de texte type Notepad++, Bloc-Note ou Brackets, enregistrez le fichier au format .bat ( ex : StartWampServeur.bat ). Sinon vous pouvez le télécharger directement ci-dessous. Il faudra le copier sur le même disque où est installé votre dossier Wamp, mais pas forcement dans le dossier Wamp, vous pouvez le mettre sur votre bureau, tant qu'il est sur le même disque ! Sinon à vous de l'adapter à votre configuration :)

Au passage, Vous pouvez aussi configurer Windows pour qu'il le lance au démarrage.

Téléchargement du script StartWampServeur

En conclusion

Alors, pas si difficile à installer que ça ? J'espère que ce tutoriel vous aura été utile en tout cas, pour ne pas vous planter dans l'installation de WampServeur3. Faite bon usage de ce script, et si vous voyez un quelconque moyen de l'améliorer, ou si vous avez des suggestions pour améliorer ce tutoriel, n'hésitez pas à partager vos connaissances en laissant un petit commentaire. Merci d'avoir suivi ce tutoriel et à très bientôt depuis vos Ordi pour encore plus de Tips ;)  !

Christian Aslan

]]>
Fri, 21 Apr 2017 08:18:01 +0100
<![CDATA[ Passez vos écrans en mode nuit et préservez votre sommeil ]]> http://www.orditips.com/article-120233-passez-vos-ecrans-en-mode-nuit-.html Protéger vos yeux de la lumiere bleu
© Squid.ink - Sunglasses

Bonjour à tous,

Que ce soit sur son smartphone, son PC, sa tablette ou sa télé, nous sommes de plus en plus exposé à la lumière bleue, notamment à cause du temps moyen passé sur nos écrans. La meilleur solution resterait de ne pas allumer d'écran le soir, avant de ce coucher. Oui mais voilà, si vous êtes ici, c'est que quelque part, le soir, vous êtes sur votre PC, ou votre smartphone et vous y trouvez toujours quelque chose à faire.  Pour vous, j'ai répertorié différentes méthodes sur différentes plateformes afin de réduire l'impact de vos écrans sur votre sommeil.

Réduire la luminosité de l'écran

Cela peut paraître bête, mais la premier cas de figure qui me vient à l'esprit c'est bien la luminosité de l'écran. Aujourd'hui, la plupart des appareils, si ce n'est pas tous, permettent de réduire la luminosité. Que ce soit le mode AUTO de certains appareils ou les réglages manuels, vous êtes en mesure de réduire l'impact nocif d'un écran sur vos yeux, simplement en réglant ce paramètre. Bien sur cela ne réglera pas le problème de cette fameuse lumière bleue complètement, mais cela l'atténuera.

Application pour filtrer la lumière bleue

Certains d'entre vous possèdent peut être déjà une option " mode nuit " intégré directement au smartphone par exemple. Dans ce cas, pas besoin d'application, il suffit de regarder dans les paramètres d'affichage de votre smartphone pour trouver cette option. C'est le cas notamment pour Android, à partir de la version Nougat, ou en option chez certains constructeurs. Sur Iphone, à partir IOS 9.3, vous disposez du mode" Night Shift ", il suffit de mettre à jour votre Iphone vers cette version pour en profiter.

Dans les autres cas, si cette option n'est pas proposé, vous pouvez vous tourner vers une application tierce dont voici une petite sélection :

Twilight ( Android )

Application disponible gratuitement sur le play store.

Développé par Urbandroid, Twilight est certainement l'une des applications gratuite les plus connus et reconnu pour Android. Elle ce présente d'une manière très sobre et facile d'utilisation. Les réglages présents permettent de sélectionner si vous souhaitez appliquer le filtre progressivement en fonction du couché du soleil, selon votre position GPS, selon une plage horaire ou bien de façon personnalisé. Vous pouvez bien sur régler l'intensité et la température de couleur du filtre ainsi que la luminosité de l'écran lorsque celui ci est appliqué. De plus, vous pouvez enregistrer tous ces réglages dans des profils, afin de les activer en fonction de votre utilisation. Le petit plus, si vous possédez des lampes connectées Philips Hue, il vous sera alors possible de les synchroniser avec Twilight.

F.lux pour ( pour Windows,  Mac,  Linux )

Disponible en téléchargement pour toutes les plateformes ici.

F.lux, que j'utilise moi même, est un logiciel qui utilise votre position géographique pour adapter la luminosité de l'écran en fonction du levé et du couché du soleil. Vous réglez votre fuseau horaire et F.lux gère le reste. Vous pouvez régler les différents paramètres du filtre en fonction du jour ou de la nuit, ainsi que les effets de transitions, lents ou rapides. Des raccourcis claviers permettent d'activer rapidement le mode nuit. Tout comme Twilight, il sera possible de synchroniser vos lampes connectées Philips Hue avec F.lux

Filtrer la lumière bleue sur votre téléviseur ou d'autres écrans.

Certains écrans d'aujourd'hui sont équipés de capteur permettant d'adapter la luminosité de l'écran en fonction de l'éclairage ambiant. D'autre encore, possède un filtre directement intégré permettant de filtrer cette lumière bleue, mais le prix de ces appareils n'est souvent pas donnés. D'ailleurs, il me semble si je ne dit pas bêtise, que cela avait fait polémique il a quelque temps, car certains constructeurs de télévision utilisait en quelques sortes, ce problème de santé comme argument marketing pour enfler les prix sur ce type de produit. Alors, je ne me lancerais dans ce débat, ce n'ai pas le but de cette article, sachez simplement que ces solutions existent mais elles restent assez onéreuses .

D'une autre façon, il est possible de ce tourner vers des lunettes gaming. Elle ne sont pas toutes spécifiquement dédié au gaming, mais c'est surtout la cible principale de ces marques. Il en existe de toute forme et de tout prix également. À vous de faire votre marché et de comparer les différents produits proposés afin de trouver celle la plus adapté à votre utilisation.

En conclusion

Qu'elles soit logiciels ou matériels, gratuites ou payantes, plusieurs solutions s'offre à vous pour vous protéger des effets nocifs de la lumière bleue. Si vous passez beaucoup de temps sur vos écrans, alors n'hésitez pas, adopter au moins l'une de ces solutions pour vous aider à préserver votre sommeil.

Christian Aslan

]]>
Sat, 15 Apr 2017 07:57:01 +0100
<![CDATA[ Partage de connexion Android - profitez de votre forfait 4G illimité sur pc ]]> http://www.orditips.com/article-120041-partage-de-connexion-android-si.html Logo Clockworkmod tether
© ClockWorkMod - Koushik Dutta

Bonjour à tous,

Je vous en parlais dans cet article, en tant que détenteur d'un forfait Sensation 4G chez Bouygues Télécom, j'ai eu la possibilité de contracter l'option gratuite " W-E 4G illimité " qui me permet, comme son nom l'indique, de surfer en 4G de manière illimité tous les week-ends. C'est bien beau, faut le dire, c'était l'occasion pour moi, qui n'avait pas de connexion fixe à un moment donné, de pouvoir profiter des week-ends pour télécharger mes gros fichier de jeu et autres sur mon pc, en utilisant le partage de connexion de mon Android. Oui mais voila, j'ai découvert à mes dépens que cette option n'est pas sans contrainte. En effet, il est impossible d'utiliser le mode modem du Smartphone pour surfer en illimité ! Heureusement, après quelques recherches, j'ai découvert qu'il existait un logiciel qui permettait de masquer l'utilisation du mode modem auprès de votre opérateur, en simulant une connexion direct depuis votre smartphone, alors qu'en réalité, vous naviguiez depuis votre pc.

ClockWorkMod Tether - Rendez le mode modem indétectable !

ClockWorkMod Tether est une application Android combiné à un logiciel disponible pour pc, mac ou linux, et qui vous permet en quelques sortes, de tromper votre opérateur quand à l'utilisation que vous faite de votre connexion 4G, et ceux sans qu'il ne sache que vous utilisez le modem de votre smartphone. Autrement dit, nous parlerons de ghost tethering.  Celle ci est gratuite de base, avec une limite d'utilisation quotidienne des données, mais l'achat de l'application est tout de même recommandé dans le sens où, l' intérêt est bien sûr de pouvoir profiter de la 4G en illimité depuis votre pc.

Contourner le blocage du mode modem

En premier lieu, il faut savoir que pour ClockWorkMod Tether nous utiliserons le partage de connexion via USB avec une installation sur Windows. Donc préparez votre câble ;) !

Mise en place de ClockWorkMod sur votre smartphone

Pour commencer, télécharger l'application directement depuis le Play Store.
Une fois l'application installé, il vous faudra activer le mode " Déboguage USB " disponible dans " Options de développement ".
Pour cela, rendez vous dans paramètres >>> à propos de appareil. La ligne qui nous intéresse est " Numéro de version ". Là, soit vous avez directement la ligne sous les yeux soit elle ce trouve dans " infos logiciel ".
Une fois cette ligne repérée, cliquez 7 fois dessus pour activer le menu " options de développement ". Un petit encart apparaît pour vous signaler que c'est le cas.
De là retournez dans " paramètres " puis dans le menu options de développement qui vient d' apparaître, enfin activez le mode " Déboguage USB ".
La configuration de votre smartphone est terminé, passons à la partie pc.

Mise en place de ClockWorkMod sur votre pc

Sur votre pc, commencez par télécharger le logiciel approprié à votre système d'exploitation ici.
Installez le logiciel en mode administrateur, et suivez bien les étapes. Il vous sera demandé confirmation à un moment pour installer un serveur virtuel (TAP) , acceptez.
Il vous sera peut être nécessaire d'installer les pilotes pour votre smartphone sur votre pc, dans ce cas installez les depuis ce lien. Une fois tout ceci fait, redémarrez votre ordinateur.

Mise en route de ClockWorkMod

Commencez par lancer le logiciel en tant qu'administrateur sur votre pc, puis l'application sur votre smartphone. Reliez ce dernier à votre pc par câble USB.
Pour lancer le partage de connexion, cliquez sur le logo " USB " dans l'appli et sur " Start " dans le logiciel pc. De là, il vous sera demandé si vous souhaitez autoriser l'utilisation du mode " Déboguage USB " sur votre smartphone, acceptez.
Vous pouvez voir les logs sur le pc, ca mouline, ca mouline encore et hop vous êtes enfin connecté !

CLockWorkMod-tether-avant-lancementCLockWorkMod-tether-après-lancement
Présentation de l'application Android avant - après le lancement.
CLockWorkMod-tether-sur-pc
Présentation de l'application pc après lancement.

Si vous rencontrez des soucis lors de l'initialisation de ClockWorkMod

Je n'ai personnellement pas rencontré de soucis lors de l'utilisation de ClockWorkMod à un détail près, il vous ne sera pas possible d'utiliser un vpn sur votre pc en même temps. Du moins ce ne sera pas impossible mais les réglages sont assez complexe. Disons qu'en gros, il faut installer un second TAP pour le trafic VPN et rediriger celui celui vers ClockWorkMod . Sans ça l' activation du VPN plante la connexion avec le téléphone, car il utilise le même TAP. Je ne vais pas vous décrire plus que ça la marche à suivre, car moi même j'ai eu beaucoup de mal à le mettre en place. D'ailleurs ça n'a pas marché à tous les coups, je n'ai réussi à le faire fonctionner de cette manière que sur 1 seul de mes pc. Mais sachez que c'est possible en tout cas, si vous savez bidouiller le réseau, ce qui n'est pas forcement ma tasse de thé, alors ça devrait fonctionner.

En conclusion

Comme vous avez pu le voir, ClockWorkMod vous permettra enfin de profiter pleinement de votre connexion 4G illimité en masquant l'utilisation du modem à votre opérateur. Avec l'arriver prochaine des forfaits illimités chez certains opérateurs, il ne fera aucun doute que cette solution de " dépannage " ce démocratise d'ici peu.

Christian Aslan

]]>
Sun, 09 Apr 2017 09:17:01 +0100
<![CDATA[ Redirection 301 - Prestashop ]]> http://www.orditips.com/article-82173-redirection-301-prestashop.html

Bonjour à tous,

Afin de ne pas perdre le référencement d'une page que vous avez supprimé ou déplacé, ou encore si vous avez activé l'option " url simplifié ", et donc réécrit vos url, alors que la plupart était déjà référencés " Mince alors ! ( Big up à mon ami Julien :p ), il peut-être utile dans ces conditions de rediriger vos anciennes adresses url vers les nouvelles en utilisant une redirection 301.

Note : Ce tuto traite uniquement des rédirections au sein du même nom de domaine. Si vous devez rediriger un site entier vers un nouveau nom de domaine, ce tuto ne vous est pas destiné, mais il en existe d'autres sur le web ;)

Créer une redirection 301

Pour créer une redirection 301 d'une page vers une autre, il va falloir modifier le fichier .htaccess ce trouvant à la racine de votre site.

Pour commencer, ouvrez votre logiciel FTP ( filezilla dans mon cas ). Allez dans le dossier racine "www" et cherchez le fichier .htaccess

Une fois que c'est trouvé, faite clic droit puis enregistrer, afin de garder une copie de l'original et ensuite refaite clic droit et cette fois éditer. Si on vous demande de choisir un programme, sélectionnez celui que vous utilisez d'habitude, comme notepad+++ ou le simple bloc note de windows en exemple.

Maintenant, il va falloir y ajouter le code ci-dessous en le modifiant pour vos besoins :

RedirectPermanent   /tee-shirt/tee-shirt-bleu-ciel.html    /catégorie-t-shirt/article-tee-shirt-bleu-ciel.html

Note : En premier inscrivez " RedirectPermanent " suivi de 3 espaces minimum ( très important ) , puis indiqué la page à rediriger, laissez de nouveau 3 espaces ou plus et indiquez vers quelle page celle ci doit être redirigé.

Pour ma part, j'ai collé mon code juste après cette ligne là :

                # ~~end~~ Do not remove this comment, Prestashop will keep automatically the code outside this comment when .htaccess will be generated again

Cela évite de supprimer ce que vous venez d'y inscrire au cas où votre fichier .htaccess soit pour une raison ou une autre, régénéré.

Une fois les modifications apportés à votre fichier .htaccess, faite enregistrer et retournez dans votre logiciel FTP. Avec filezilla, une notification s'affiche pour demander si vous souhaitez renvoyer sur le serveur le fichier que vous venez de modifier. Mettez oui. Sinon dans d'autres cas, il faudra simplement renvoyer le fichier manuellement, comme vous l'avez sûrement déjà fais ;)

Et voila ! C'est pas plus difficile que ca !

En espérant que ce mini-tuto vous aura été utile :)

Christian Aslan

]]>
Sun, 20 Oct 2013 08:17:01 +0100
<![CDATA[ Créer une carte de france intéractive avec Gimp ]]> http://www.orditips.com/article-81984-creer-une-carte-de-france-intera.html

Bonjour à tous,

Dernièrement, j'ai eu à créer une carte de France intéractive pour un site web, plus précisément pour un annuaire. Les boutiques devaient être reférencés par région, et pour rendre tout cela plus interactif, il a fallu créer une carte de France sur laquelle nous pouvions directement cliquer sur une région pour accéder au contenu de la catégorie.

Ni une , ni deux, Je me met à rechercher une manière simple de réaliser ceci, et à ce moment là je me souviens d'une option semblable que j'avais pu voir dans un logiciel que j'utilise très souvent, qui n'est autre que Gimp.

Sans plus attendre, je vous invite à le télécharger sur cette page, et nous allons commencer le tutoriel qui, vous allez le voir, n'à vraiment rien de bien compliqué !

Note: il existe plusieurs façons de réaliser une carte intéractive: Flash, HTML5, jquery etc... celle que je vous propose dans ce tutoriel est simple, sans fioriture et la réalisation est à la portée de tout le monde. Seul l'intégration à votre site web demande un minimum de connaissance en HTML.

1 er étape : Créer une carte de France

Pour commencer, et avant tout autres choses, il nous faut une image au format .jpg ou .png représentant la carte de France ! C'est sur cette image que nous allons poser les " coordonnées " permettant de créer un lien sur une zone précise de l'image.

Pour ma part, j'ai utilisé une image toute prête que j'ai simplifié, et que j'ai trouvé sur ce blog. Je remercie l'auteur pour son travail, qui d'ailleurs vous propose un tutoriel vidéo, afin de réaliser votre propre carte de France grâce au logiciel inkscape. Une bonne idée si vous avez besoin d'intégrer des éléments particuliers à votre carte.

Maintenant que vous avez votre carte ( image au format .jpg ou .png ) nous allons pouvoir passer à la partie suivante : la réalisation de notre carte intéractive :D

2 eme étape : Réalisation de la carte intéractive avec gimp

Lancez gimp et ouvrez votre image. Ensuite allez dans Filtres > Web > Image cliquable web. C'est grâce à ce greffon que nous allons pouvoir mettre en forme nos zones cliquables.

Pour faire un tour rapide de l'interface, La barre horizontal du haut propose les outils classiques d'édition ( copier, coller, zoom etc...). La barre vertical à gauche contient les outils nous permettant de réaliser une zone cliquable. Vous avez le choix entre entre plusieurs formes : cercle, rectangle et polygonale. C'est cette dernière qui va nous intéresser pour réaliser nos zones sur la carte. Et enfin à gauche, vous trouverez la liste des zones que vous aurez créé au fur et à mesure de l'avancement. Vous avez possibilité de les éditer ou de les supprimer.

Nous allons commencer par sélectionner l'outil de création de zones polygonales. En fait le principe est simple, cliquez au bord de la zone que vous souhaitez créer,et faite en le tour en cliquant plusieurs fois de la même façon. Cependant ne soyez pas forcement hyper précis et faite le tour grosomodo. Dites vous simplement que plus vous allez créer de points pour définir votre zone, et plus votre code sera lourd et long à charger dans votre page web.

demonstration-image-cliquable-web-gimp

Lorsque vous avez placez vos points, il suffit de faire un double clique gauche près du 1er point que vous avez créer pour finir la zone. A ce moment là, une fenêtre s'ouvre et vous demande d'insérer le lien qui s'ouvrira lorsque la personne clique sur cette zone. Vous pouvez également mettre un texte alternatif ALT, ca peut toujours être utile ;) Vous avez remarqué les 2 autres onglets dans cette fenêtre ? et bien " polygone" sert à retoucher votre zone via ces coordonnées, je ne vous conseille de ne pas y toucher, si vous souhaitez modifier votre zone, sélectionnez la flèche dans la barre vertical de gauche et vous pourrez déplacer vos points. Le dernier onglet " javascript " permet d'ajouter des effets mouseover et mouseout. Ne m'y connaissant pas plus que ça dans le domaine, je ne vais pas vous en parler ici, cependant si vous savez l'utiliser n'hésitez pas à le partager en commentaire ;)

Parametre-de-la-zone-cliquable

Il faut recommencer l'opération précédente autant de fois que vous souhaitez créer de zone. Faite juste attention à ne pas ce faire chevaucher vos zones, çela pourrait poser des problèmes lors de l'utilisation.

Lorsque vous avez terminé de créer toutes vos zones, faite enregistrer, choisissez un nom pour votre fichier ainsi que l'emplacement où vous souhaitez l'enregistrer, et nous allons passer à l'étape suivante : l'intégration à votre site web.

3 eme étape : Intégrez votre carte intéractive sur votre site web

Maintenant que nous avons enregistré notre fichier, nous allons le reprendre avec le bloc note de windows. Allez à l'emplacement ou vous avez enregistré votre fichier puis faite clic droit et ouvrir avec... Dans la liste des programmes sélectionnez le bloc note. Comme vous pouvez le voir, le fichier contient une première balise <img/> qui correspond à votre image. En second, vous avez une balise <map>. Celle ci contient toutes les coordonnées que vous avez créé précédemment.

Avant d'intégrer le code à votre site web, vous devez uploder votre image sur votre serveur. Une fois que c'est fait, récupérez l'adresse de votre image et copier là dans la balise <img/> entre les guillemets double de src.

Maintenant copier l'intégralité du code et collez le dans la source de votre page web, à l'emplacement ou vous souhaitez voir apparaître votre carte.

Et voila ! Votre carte est normalement fonctionnelle. Testez là afin de voir si vous avez bien posé vos coordonnées.

J'espère que ce tuto vous aura été utile. Sachez qu'il est possible d'utilisé ce greffon pour créer d'autres chose qu'une carte. Vous pouvez très bien créer une image qui vous servira de menu pour votre site par exemple et plein d'autres choses.

Christian Aslan

]]>
Wed, 16 Oct 2013 09:10:01 +0100
<![CDATA[ Panier déroulant avec Jquery Easing Plugin ]]> http://www.orditips.com/article-74738-panier-deroulant-avec-jquery-eas.html

Bonjour à tous,

Aujourd'hui je vais vous présenter un plugin Jquery fort sympathique. Ce plugin n'est autre que Easing. Grâce à ce plugin Jquery nous allons pouvoir masquer le panier de votre boutique en ligne, et le faire apparaître uniquement au passage de la souris, avec une petite animation que l'on aura pris le soin de choisir parmi celle qui sont proposés par le plugin Easing.

L'inspiration de ce tutoriel me vient en partie de ce menu réalisé en Jquery

La structure HTML et CSS du panier déroulant

HTML

<div id="ensemble">
<ul id="container">
<li class="yellow">
<p>
<a href="#" title="Cliquez ici pour gérer votre panier">Mon panier</a>
</p>
<p>
<iframe allowtransparency="true" class="panier" frameborder="no" height="120" marginheight="0" marginwidth="0" name="framemod" noresize="noresize" scrolling="auto" src="http://www.wifeo.com/tool/iframe/module_blog.php?idmod=1&amp;nba=3&amp;n_s=ordi-tips" width="250"></iframe>
</p>
<p>
<a class="commander" href="#">Commander</a></p>
</li>
</ul>
</div>

Cette partie est à coller à l'endroit même ou vous souhaitez faire apparaître le panier.

Note : L'iframe ( module exportable ) dans le code présente mes articles les plus vus ce mois ci. Il faudra donc la remplacer par la votre en prennant soin d'ajouter class:"panier" au code source.

Et voici les styles CSS qui l'accompagne :



#ensemble {
        position:relative;
        text-align:center;
        width:285px;
        margin: 0 auto;
}

/* structure du panier coulissant */

#container {
        margin:0;
        padding:0;
        position:absolute;
        z-index:1;
}
#container li {
        width:280px;
        height:38px;  /* Largeur et hauteur initial */
        color:#191919;
        text-align:center;
        overflow:hidden;  /* à ne pas retirer ! */
        border-radius: 20px 0px;
}

/* Styles des liens et du texte */

#container a {
        color:#000;
        text-decoration:none;
}

#container p {
        padding:0px 5px;
        color:#000;
}

/* Les styles pour l'iframe du panier */

.panier {
        background:#fff;
        margin:10px 3px 5px 0px;
        border-radius: 10px 0px;
        border: 1px solid #fff;
}

/* Les styles pour le bouton commander */

.commander {
        background: #fff;
        padding:10px;
        text-transform: uppercase;
        border-radius: 10px 0px;
}

/*classes de couleur pour panier déroulant*/

.green{background:#6AA63B;}
.yellow{background:#FBC700;}
.red{background:#D52100;}
.purple{background:#5122B4;}
.blue{background:#0292C0;}
.white{background:#F3F3F3;}            

Si vous êtes en design libre :

Cette partie est à copier dans la partie css de votre template.

Si vous êtes en design préfabriqué :

Copier le code ci dessus et coller le dans une balise < style > dans la partie < head > de votre page.

Exemple :

<style type="text/css" />


Le code css ci dessus.


</style>

La partie jquery du panier déroulant

Pour commencer nous allons importer la bibliothèque Jquery en copiant ceci dans la partie head de votre page :

SCRIPT

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

Maintenant nous allons faire appel au plugin Jquery Easing et là, il y a 2 solutions.

Vous avez un Hébergeur de fichier : dans ce cas, il vous suffira de l'uploader et de faire un lien vers celui-ci comme dans l'exemple ci-dessus.

Vous n'avez pas d'hébergeur : Dans ce cas, copier l'intégralité du fichier jquery.easing.1.3.js dans une balise et copier la dans la partie de votre page.

Exemple :

<script type="text/javascript">

Contenu de jquery.easing.1.3.js

</script>         

Une fois que c'est fait, Il vous suffit de copier ce script à la suite des 2 autres :

<script type="text/javascript">
$(document).ready(function(){
   $("a").click(function(){$(this).blur();
    });
$("#container li").mouseover(function(){$(this).stop().animate({height:'222px'},{queue:false,duration:600,easing:'easeInOutCubic'})
});
$("#container li").mouseout(function(){$(this).stop().animate({height:'38px'},{queue:false,duration:600,easing:'easeInOutCubic'})
});
});
</script>            

Normalement à ce stade, votre bouton doit fonctionner correctement.

Personnaliser l'animation du panier déroulant

Changer l'animation

Le plugin Jquery Easing embarque une dizaine d'animations coulissantes différentes. Il suffit de modifier easing:'easeInOutCubic' par l'un des effets ci dessous :

  • easeInOutCubic ( page de demo )
  • easeInOutQuad
  • easeInOutQuart
  • easeInOutQuint
  • easeInOutSine
  • easeInOutExpo
  • easeInOutCirc
  • easeInOutElastic( à tendance à buger un petit peu )
  • easeInOutBack
  • easeInOutBounce ( L'effet le plus sympa )

Modifier la vitesse d'exécution de l'effet

il faut changer la valeur de duration:600 .

Adapter la taille du panier coulissant à votre design

  • Dans votre css : modifier la valeur de width; et height; de #container liEt modifier le valeur de width; de #ensemble
  • Dans le script ci-dessus : modifier la valeur de height, sachant que height:'222px correspond à la hauteur du bloc lors du passage de la souris, et height:'38px à la hauteur à laquelle doit revenir le bloc une fois que la souris à quitté la zone. ( En générale égale au height du CSS #container li)

Changer la couleur du design

Il suffit de sélectionner l'une des classes de couleurs présentent dans le css ( ou d'en créer une ! ) et de modifier la classe dans la structure HTML.

Il est tout à fais possible de réaliser un menu horizontal en partant de cette base, puisque cette meme base est basé sur ce menu Jquery ... Vous me suivez ?

Il y a simplement 2 modifications à faire dans votre css :

  • Ajoutez un float: left; à #container li
  • Modifier la valeur width; de #ensemble selon la largeur de votre design pour que les catégories puisse s'aligner horizontalement.

Et voila vous avez un jolie menu horizontal que vous pouvez personaliser à votre guise.

Conclusion

Beaucoup de possiblités d'animations sont offertes par le plugin Easing, meme si la mise en place peut paraitre un peu laborieuse, surtout si vous débutez.

Mais maintenant c'est à vous de jouer :) Et si vous meme vous avez créé quelque chose sur la base de ce plugin, n'hésitez pas à le partager en bas de page.

Fin de ce tutoriel.

Christian Aslan

]]>
Fri, 12 Apr 2013 12:05:01 +0100
<![CDATA[ April fool's Google Analytics - Le poisson d'avril de Google ! ]]> http://www.orditips.com/article-74048-le-poisson-avril-de-google-anali.html Extrait de google analitics ` april fool`s `

Bonjour à tous,

Il m'arrive de temps à autres d'aller voir en temps réel ce qui ce passe sur mon site. Ainsi grâce a cette fonction on peux voir combien de visiteur ce trouve sur le site, ainsi que les différentes sources par lesquelles il sont arrivés. Et qu'elle fut ma surprise cette après midi de voir 1 ou plutôt 41 visiteur assez inattendu sur mon blog.

international Space Station  Control Room
" international Space Station – Control Room "

Ça y est, ils m'ont repéré XD !

Au début je me suis dit que c'était simplement un robot d'un quelconque site ou moteur de recherche, et pourquoi pas ça reste cohérent, mais ce qu'il l'ai moins c'est que ces mystérieux visiteurs sont arrivés sur mon site par le mot clé " april fool's " et de plus, ils ce déplacent constament de pays en pays et même en pleine mer !

Tiens donc ? Je n'ai jamais écrit d'article la dessus ? Ne serais-ce pas là qu'un simple poisson d'avril de la part de google and co. ?

La réponse me semble toute prête, pas vous ? ;)

Christian Aslan

]]>
Mon, 01 Apr 2013 15:18:01 +0100
<![CDATA[ Google Chrome Maze - Transformez un site web en terrain de jeu 3D ]]> http://www.orditips.com/article-73631-google-chrome-maze-transformez-u.html Google Chrome Maze

Et si votre site web devenait une énorme plate forme de jeu en 3D et votre manette de jeu ne serait autre que votre smartphone Android ? Et bien maintenant c'est possible et c'est vraiment très réussi !

Transformez un site Web en jeu de plateforme 3D !

Chrome Maze a été développé par les équipes de google en ce basant sur la technologie WebGL, qui permet de déstructurer une page web afin de pouvoir l'exploiter comme environnement 3D. La mise en place est assez simple, cependant en plus d'avoir à disposition Google Chrome sur votre PC, vous devez également disposer de l'application Google Chrome sur votre smartphone Android.

Comment jouer à Chrome Maze ?

Pour pourvoir jouer sur n'importe quel site web, il faut tout d'abord préparer rapidement votre smartphone. Pour cela commencez par vous rendre dans paramètres >>> compte et synchro. Cliquez sur votre compte Google et cochez Google Chrome. Cela vous permettra de synchroniser vos données avec votre version PC.

Ensuite il faudra désactiver la rotation automatique de l'écran, puis enfin vous rendre depuis vos 2 appareils sur chrome.com/maze depuis le navigateur Chrome.

Passez l'intro sur les 2 appareils, et choisissez " Use Tab Sync " sur votre versions pc, et sur votre Android, depuis chrome allez dans paramètres >>> " autres appareils " et sélectionner " Connect to world Wide Maze ".

Et voila vous êtes synchronisé !

Maintenant il ne vous reste plus qu'à sélectionner le site avec lequel vous allez joué !

Remarque : Pour activer l'acceleromètre sur la map, il suffit d'appuyer sur power ;)

Enjoy :D

Christian Aslan

]]>
Tue, 26 Mar 2013 07:03:01 +0100
<![CDATA[ Pay with à tweet ! Du contenu gratuit en échange d' un partage ! ]]> http://www.orditips.com/article-73354-pay-with-tweet-du-contenu-gratui.html Module social

Vous souhaitez proposer du contenu à télécharger gratuitement sur votre site, mais vous cherchez également un moyen de vous faire connaître pour ce même contenu ? Voici un moyen simple de concilier les 2 grâce à ce module social.

Pay with a tweet est un système de paiement social qui permet à l'auteur d'un contenu en téléchargement sur un site, de ce faire rémunérer par un tweet ou un partage via Facebook.

Il s'agit d'un outil vraiment très simple à utilisé car il vous suffira de vous rendre sur leur site internet, de remplir un petit formulaire avec les infos du fichier et la page de téléchargement, pour obtenir votre bouton "pay with a Tweet".

Pour voir un exemple de ce bouton en action, jeté un petit coup d'oeil à l'un de mes kits graphiques en téléchargement. Cela vous donnera sûrement une idée du potentiel de Pay with a tweet.

Christian Aslan

]]>
Fri, 22 Mar 2013 12:47:01 +0100
<![CDATA[ Nouvautès sur OrdiTips ! Kit graphiques et templates en téléchargement gratuit ]]> http://www.orditips.com/article-73061-nouvautes-sur-orditips-kit-graph.html Template sobre

Bonjour à toutes et à tous,

Bonne nouvelle ! Dorénavant sur OrdiTips, vous trouverez plusieurs kits graphiques et templates réalisés par mes soins qui seront disponibles en téléchargement gratuit à partir du site.

Pour pouvoir télécharger ces kits graphiques et templates mis à disposition, je ne vous demanderais en échange, qu' un simple tweet ou partage sur votre mur facebook... Rien d'autre ;)

C'est le fameux principe du " Pay with à tweet "

Si vous avez des suggestions, commentaires ou même critiques à propos des kits graphiques et templates, n'hésitez pas à m'en faire part via un commentaire sur cette article. N'oubliez pas tout de même qu'il s'agit d'un service gratuit ... Ne soyez pas trop dur hein !? ;)

Au plaisir chers lecteurs !

Christian Aslan

]]>
Mon, 18 Mar 2013 06:23:01 +0100
<![CDATA[ Color Scheme Designer 3 - Trouver la bonne association de couleurs ! ]]> http://www.orditips.com/article-72517-color-scheme-designer-3-trouver-.html

Qui ne c'est jamais retrouvé devant ce dilemme ? à savoir, comment faire pour trouver la bonne association de couleurs lors de la création de vos sites web ou de toutes autres activités ? Et bien sachez qu'il existe un outil gratuit, fonctionnel et vraiment très pratique qui va vous permettre de répondre à cette question.

Associez les bonnes couleurs !

Color Scheme Designer 3 est un site web regroupant plusieurs outils afin de vous facilité le travail dans le choix de vos associations de couleurs.

L'interface du site présente une roue chromatique ainsi qu'un tableau qui vous indique quelles couleurs peuvent être associés à celle que vous avez sélectionné dans la roue. Ainsi il est possible de choisir entre plusieurs options tel que " couleurs complémentaires " triade" et "tetrade" ( 3 et 4 couleurs ) ou " analogique ".

Mais ce n'est pas tout ! Color Scheme Designer 3 ne ce contente pas seulement de vous donner les bonnes couleurs, Il vous propose également une sélection de filtre à appliquer aux couleurs sélectionnées afin de faciliter leur visionage par des personnes atteintes de daltonisme !

Pour compléter le tout, il est possible de visionner le résultat sur une page web factice et d'exporter votre palette de couleurs au format css+html, xml, text, aco ( palette photoshop ) ou gpl ( palette gimp ).

Je vous invite grandement à découvrir cette outil complet et gratuit ( il est possible de faire une donation ;), qui vous aidera certainement à trouver les bonnes couleurs pour votre site web ou pour d'autres utilisations, sans trop vous prendre la tête !

Christian Aslan

]]>
Wed, 06 Mar 2013 11:07:01 +0100
<![CDATA[ { Webdesign } Les ombres en css avec box-shadow ]]> http://www.orditips.com/article-72442-ombres-css-box-shadow.html

Apres vous avoir montrez les différents usages des bordures et coins arrondis en css, je me suis dit qu'une petite démonstration de l'élément box-shadow serait un parfait complément pour réaliser une mise en page avancée de votre site web.

Présentation de box-shadow

box-shadow; permet d'ajouter une ombre portée à la plupart des éléments composant votre page web.

La déclaration ce réalise comme suit :

.image {
box-shadow: 9px 10px 5px #000;
}<br><br>
9px = décalage horizontal vers la droite
10px = décalage vertical vers le bas
5 px = la force du dégradé
#000 = la couleur de l'ombre

Il est également possible d'appliquer une valeur négative au décalage horizontal et verticale. Logiquement l'ombre horizontal ce trouvera à gauche et l'ombre vertical en haut ... Le seul frein à son utilisation concerne la compatibilité de cette élément avec d'anciens navigateurs. En outre, la compatibilté est asssuré qu'à partir d'Internet Explorer 9+, Firefox 4+, Chrome 10+, Safari 5.1+, Opera 10.5+, Opera Mobile 11+. Pour les autres navigateurs plus anciens, il sufit d'appliquer les mêmes valeurs en préfixant box-shadow; par -moz- pour Firefox < 4, ou -webkit- pour Chrome <10, Safari <5.1 et Android ce qui devient donc -moz-box-shadow; et -webkit-box-shadow;.

.image {
box-shadow: 10px 9px 5px #000;
-moz-box-shadow: 10px 9px 5px #000;
-webkit-box-shadow: 10px 9px 5px #000;
}

Pour les versions antérieures à internet explorer 9, les filtres shadow; et glow; ( spécifiques à microsoft ) permettent de réaliser un effet proche de box-shadow; avec un rendu plus ou moins bon ( décrit plus bas ) .

Application de box-shadow

Pour cette illustration, nous allons utiliser une image sur laquelle on va appliquer box-shadow; de différentes facons afin de bien comprendre son utilisation.

Ombre portée
.image {
box-shadow: 10px 9px 5px #282828;
-moz-box-shadow: 10px 9px 5px #282828;
-webkit-box-shadow: 10px 9px 5px #282828;
}
Ombre porté
.image {
box-shadow: -10px -9px 5px #282828; /* valeurs horizontal et vertical négatives */
-moz-box-shadow: -10px -9px 5px #282828;
-webkit-box-shadow: -10px -9px 5px #282828;
}
Ombre porté
.image {
box-shadow: 0px 0px 5px #282828; /* mettre les valeurs horizontal et vertical à 0px ou 1px */
-moz-box-shadow: 0px 0px 5px #282828;
-webkit-box-shadow: 0px 0px 5px #282828;
}

Les filtres shadow et glow pour IE <9

Pour ne pas changer, internet explorer fait office de mauvais élève :p la propriété box-shadow n'est ainsi reconnue qu'à partir de la version 9. Cepandant il existe 2 alternatives propres à microsoft, avec un rendu plus ou moins bon. Il s'agit du filtre shadow, ressamblant plus à une ombre en perspéctive qu'à une ombre portée, et du filtre glow qui donne un effet "d'halo " autour de l'image.

Note : n'ayant pas à ma disposition d'anciennes versions d'internet explorer, aucune illustration n'est présenté.

Application du filtre shadow

Le filtre shadow; accepte 3 valeurs différentes : color ... pour la couleur, direction ... pour la direction ( en degrès ) et strength pour l'intensité du dégradé.

<!--[if lte IE 8]>
  <style type="text/css">
  .image {
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=110, Strength=10);
    zoom: 1;
  }
  </style>
<![endif]-->

/* Il est conseillé d'écrire un commentaire conditionnel spécifique pour les versions antérieures à IE 9. */

Application du filtre glow

Le filtre glow; accepte 2 valeurs différentes : color ... pour la couleur et strength pour l'intensité du dégradé.

<!--[if lte IE 8]>
<style type="text/css">
.image {
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=10);
  zoom: 1;
}
</style>
<![endif]-->
/* Il est conseillé d'écrire un commentaire conditionnel spécifique pour les versions antérieures à IE 9. */

Christian Aslan

]]>
Tue, 05 Mar 2013 07:59:01 +0100
<![CDATA[ Créer un lien hypertexte sur un forum utilisant le langage BBcode ]]> http://www.orditips.com/article-72215-lien-hypertexte-forum-bbcode.html

Bonjour,

Voici une petite astuce simple pour réaliser un lien hypertexte ainsi que quelques variantes, sur un forum utilisant le langage BBcode.

Lien hypertexte

Pour réaliser un simple lien hypertexte sur un forum, il vous suffit d'utiliser la balise [url] comme ceci :

[url=http://www.votre-lien.com]texte du lien[/url]

Lien hypertexte sur une image

Il est possible de créer un lien hypertexte directement sur image. Pour cela on ajoute à l'intérieur de la balise [url] la balise [img] comme ceci :

[url=http://www.votre-lien.com][img]http://www.votre-lien.com/image.png[/img][/url]

Lien hypertexte avec texte et image

Bien que niveau esthétique ce ne soit pas très jolie, il est possible de créer un lien sur une image suivi d'un texte. Pour cela on reprend l'exemple ci-dessus et on ajoute le texte entre les 2 balises de fermeture [/img] et [/url] comme ceci :

[url=http://www.votre-lien.com][img]http://www.votre-lien.com/image.png[/img]Texte du lien[/url]

C'est à vous maintenant ;)

Christian Aslan

]]>
Thu, 28 Feb 2013 09:32:01 +0100
<![CDATA[ Marqueur de données - Mettre en valeur un évènement dans Google ]]> http://www.orditips.com/article-71908-marqueur-de-donnees-mettre-en-va.html

Lors d'une simple visite de routine sur mon compte google webmasters tools, j'ai remarqué l'arrivé d'une nouvelle fonctionnalité permettant de baliser du contenu sans avoir à modifier votre code HTML. Cette fonctionnalité ce nomme " Marqueur de données ", elle est disponible dans la rubrique " optimisation " de votre compte GWT.

À quoi sert le " marqueur de données " ?

Le marqueur de donnés permet à n'importe qu'elle site web souhaitant proposer un événement, de le mettre en avant dans les pages de recherche google sans avoir à modifier le code source de la page en question grâce à l'outil fourni dans GWT.

Comment mettre en place le " marqueur de données " ?

Pour la mise en place, rendez vous dans la rubrique " optimisation " puis " Marqueur de données " de votre compte GWT. Puis cliquez sur " commencer le balisage ".

Commencer par renseigner l'adresse de la page web concerné par l'événement et sélectionnez une option. Si plusieurs pages différentes sont liez à l'événement en question sélectionnez " Baliser cette page et d'autres similaires " et dans l'autre cas " Baliser cette page uniquement ". Vous arriverez alors sur la page concerné par l'événement avec sur votre droite une barre d'outils contenant des " éléments de données " à renseigner.

Pour remplir un champ, vous devez surligner l'information demandé dans votre page web. Une fois ceci fait, un petit encadré apparait pour indiquer dans quels champs doivent être insérés ces informations.

Si des informations que vous souhaitez insérer venaient à ne pas être présentes sur la page, vous avez la possibilité de les ajouter en cliquant sur le petit engrenage en haut à droite et en sélectionnant " ajouter les balises manquantes " .

Une fois que vous avez renseigné toutes les informations, il vous suffit de cliquer sur " publier ".

Après un petit laps de temps pour la prise en compte, vous devriez voir apparaître dans les résultats de recherche accompagnant vos événements, toutes les informations que vous avez renseigné à ce propos.

En conclusion

Le " marqueur de données " est un outil qui risque fort d'améliorer la pertinence des résultats de recherche dans google. De plus il est très simple à mettre en place et ne nécessite aucune modification du code HTML. Il faudra juste laisser le temps pour l'outil de ce démocratiser, avant de voir apparaître de plus en plus ce type de résultat.

Christian Aslan

]]>
Thu, 21 Feb 2013 18:17:01 +0100
<![CDATA[ { Application android } Test de google analytics et gAnalytics. ]]> http://www.orditips.com/article-71878-test-application-android-analiti.html Test application android

Aujourd'hui j'ai décidé de tester et donc de comparer 2 applications Android qui vont vous permettrent de suivre les stats de votre site depuis votre smartphone.

La première est officielle et bien connue, il s'agit de Google Analytics. Et la seconde non officielle, il s'agit de gAnalytics.

Google Analytics - L'essentiel tout simplement.

La première chose qui me frappe en arrivant sur l'aplli c'est le nombre d'onglet proposé pour visualiser les stats... Seulement 4 oO ! Il s'agit de temps réel, tableau de bord, alerte automatique et alerte personnalisé.

Alors certes 4 onglets, ça ne veux rien dire, surtout s'ils sont complets ! Faisons donc un petit tour de chaque onglet :

Temps réel

L'onglet temps réel permet de visualiser le nombre d'internautes visitant actuellement votre site. Vous trouverez comme infos les pages qui sont visités ainsi que la source du trafic ... Mais c'est tout ! Si vous vous attendiez à plus d'infos ou à la possibilité de filtrer les résultats comme sur votre pc, c'est raté. Très peu d'options donc et à ce stade très peu d'intérêt à mon gout.

tableau de bord

Il s'agit du premier onglet qui s'ouvre après avoir sélectionné votre site. Vous pouvez donc visualiser vos différents graphiques. Mais quand, sur la version pc de Google analytics, j'ai une ribambelle d'info comme le nombre de visiteur, de quel pays arrivent-ils, mes objectifs etc.. Sur l'application il n'y a que 2 tableaux : Visiteurs uniques et taux de conversion par objectif. Heureusement vous pouvez tout de même paramètrer ou ajouter vos propres tableaux de suivi en cliquant sur l'onglet paramètres.

alertes automatiques et alertes personnalisées

Les alertes permettent de visualiser les différents événements importants en rapport avec votre site. Elles permettent notamment de comparer vos anciens stats avec les nouveaux pour savoir par exemple, si votre nombre de visiteur à augmenté ou diminué, idem pour le nombre de pages vues et le temps passé sur les pages. Soit elle sont automatiques et fournies directement par google analytics, soit vous pouvez les personnalisées, mais dans ce second cas, vous devrez le faire depuis la version pc.

La navigation quand à elle, reste plutôt ergonimique. Les 4 onglets sont présentées sous forme de réglette horizontale que l'on fait coulisser.

gAnalytics - Une application complète !

L'application android gAnalytics, est une version bien plus complète et efficace que l'appli officiel. En d'autres termes, la où l'application officiel pèche par un manque de fonctionnalité déconcertant, l'outsider gAnalitycs lui ne ce contente pas de fournir une version de base et sans trop d'intérêt, mais belle et bien ce que l'on peut attendre d'une application de stats pour site web, c'est à dire tout !

J'irais presque jusqu'à dire qu'il s'agit d'une copie conforme de la version pc de Google Analytics tellement qu'il y a de filtres et autres options de suivi.

La navigation ce compose ainsi de 7 onglets :

temps réel

Tout comme l'application officielle, gAnalytics permet de voir en temps réel le nombre de visiteur sur votre site, ainsi que la source et la page où il se trouve mais c'est sans plus d'option.

panneau

Il s'agit en réalité de votre tableau de bord où sont répertoriés le nombre de visite, de pages vues, la durée moyenne de la visite etc... Vous avez la possibilité de sélectionner pour une stat une période donnée et de la visualiser dans un graphique avec tous les détails.

visiteur

Cette onglet répertorie l'audience de votre sites web. Ainsi vous aurez la possibilité de filtrer par données démographique, comportement, système d'exploitation et mobile avec toutes les options que l'on connait de la version pc de google analytics.

trafic

Tout comme la version pc ( décidément :p ) tout le trafic de votre site web est listé dans cette onglet ( Sites réfèrents, accès direct etc...).

contenu

Il s'agit peut être du menu le moins intéressant. Il reprend l'essentiel des informations présents dans d'autres onglets.

objectifs

Si vous avez créé des objectifs dans google analytics, il seront listés ici. Personnellement je n'en ai pas encore créé, donc je n'ai pas testé ce menu.

ecommerce

Idem que pour le précédent.

Concernant la navigation

Celle ci ce fait plutôt intuitivement. les différents onglets sont présentés dans un menu vertical coulissant sur la gauche de l'écran et le filtrage par date est présent dans la barre de navigation du haut pour toutes les pages. Il y a également une petite bannière de pub très discrète en bas de l'écran, mais il n'y en a aucune autre et elle ne gène en rien la navigation !

Conclusion : Google analytics ou gAnalytics

Malheureusement google à l'air d'avoir bâclé sont appli et propose simplement l'essentiel... ou pas ! tout dépendra de l'utilisation que vous en faite et des informations dont vous avez besoin.

Mon choix ce porte clairement sur l'outsider gAnalytics qui nous livre là une application complète, ergonomique et qui plus est efficace mais qui, faut bien le dire , est une copie casi conforme de la version pc de google analytics. Mais c'est pour notre plus grand plaisir :)

Christian Aslan

]]>
Thu, 21 Feb 2013 08:08:01 +0100