<![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 Sun, 10 Dec 2017 03:04:19 +0100 <![CDATA[ Écosia - Un moteur de recherche écologique ]]> http://www.orditips.com/article-121275--cosia-un-moteur-de-recherche-e.html ecosia moteur de recherche ecologique
© Écosia - Moteur de recherche

Si vous utilisez souvent un moteur de recherche pour vos requêtes, vous n'êtes pas sans savoir que tout ceci à un coût pour la planète, lié en partie à l'énergie consommé par votre matériel et celle nécessaire pour acheminer votre requête jusqu'aux serveurs, qui eux-mêmes consomment de l'énergie pour vous renvoyer une réponse lié à votre requête. Et ça, c'est sans compter sur les différents intermédiaires qui permettent d'acheminer cette requête dans un sens comme dans l'autre.

Alors pourquoi ne pas lier l'utile... à l'utile lors de vos recherches sur le web en réduisant simplement votre impact sur l'environnement ?

Écosia le moteur de recherche qui plante des arbres !

Le moteur de recherche Écosia fondé en 2009, est issu d'une entreprise Allemande à vocation social qui met en oeuvre différents programmes de plantation d’arbres ainsi que différents programmes communautaires notamment au Burkina Faso, à Madagascar et au Pérou.

Son fondateur, Christian Kroll, souhaitait après plusieurs voyages à travers le monde, créer un modèle économique avec un impact social positif.

Après un projet de moteur de recherche local au tibet du nom de Xabbel, ainsi que de quelques mois passé sur projets de reforestation de la forêt atlantique en Argentine et au Brésil,  l'idée de créer un moteur de recherche qui permettrait de financer des projets de plantation et de réhabilitation est alors née et Écosia fut créé.

Comment fonctionne le moteur de recherche Écosia ?

Écosia ce base sur les techniques de recherche de Bing en y ajoutant ses propres algorithmes pour améliorer les résultats de leur moteur de recherche.

Les revenus sont eux générés par la publicité, toujours en partenariat avec Bing.

Pour chaque recherche que vous effectuez sur Écosia, un revenu publicitaire est généré. Cela peut être du à une simple recherche, dans ce cas un compteur affiche le nombre de recherche que vous avez effectué sur le site. Ils peuvent aussi provenir d'un clic sur une publicité ou bien suite à l'achat d'un produit sur un site partenaire référencé par Écosia.

C'est l'ensemble de ces revenus qu'Écosia utilise afin de financer des projets de reforestations à hauteur de 80 % des bénéfices récoltés. Il faut en moyenne 45 recherches pour pouvoir planter un arbre. Aujourd'hui, se sont près de 8 millions d'arbres qui ont été plantés grâce à cela.

Sachant qu'en moyenne une requête émise vers un moteur de recherche est estimée à environ 0,2 grammes de CO2, et qu'un acacia adulte permet d'absorber 50 kg de CO2 au cours de sa vie, vous contribuez donc assez rapidement à réduire votre impact sur l'environnement.

Et vous, prêt à vous lancer ?

Écosia est disponible simplement en vous rendant sur la page d'accueil du site ou en l'ajoutant en tant que moteur de recherche par défaut dans votre navigateur depuis cette même page. Si vous êtes sur smartphone, une application y est dédié sur les stores respectifs.

Juste un petit mot...

Pour ma part, j'ai déjà adopté dans ma vie de tous les jours des gestes simples qui me permettent de réduire mon impact écologique sur la planète. Recyclage, consommation local, recharger mon téléphone de jour etc...

Mais c'est vrai, en ce qui concerne  les appareils électroniques, et rien qu'avec mon blog, je ne suis pas forcement le plus économe, même si je fais des efforts.

Alors quand des solutions comme Écosia existent, je ne vois aucune raison de ne pas les adopter. C'est donc volontiers que je l'ajoute dans mes moteurs de recherche favoris. Bien sur, Écosia ne remplacera pas Google en ce qui concerne le référencement, car une grande partie de mon trafic provient de là. Mais pour des recherches de la vie de tous les jours, c'est parfait !

Je vous invite donc à soutenir des projets comme celui ci.

De plus, et c'est d'autant plus vrai aujourd'hui, la planète va mal ( si si ! ) et si un temps soit peu nous pouvons faire quelque chose pour elle, alors n'hésitons pas !

]]>
Mon, 29 May 2017 07:08:01 +0100
<![CDATA[ { Tuto } Brackets - Un éditeur de code complet ! ]]> http://www.orditips.com/article-121000--tuto-brackets-un-editeur-de-co.html Brackets - Un éditeur de code complet
© Adobe - Source photo : Wikipédia

Bonjour à tous,

Aujourd'hui je vais vous présenter un éditeur de code HTML, CSS et JavaScript, complet, performant et gratuit , orienté pour l'édition Front-End, qui n'est autre que Brackets.

Open-source et gratuit, Brackets est un puissant outil qui va vous permettre d'éditer vos codes sources HTML, CSS et JavaScript de manière simple, efficace et intuitive. Brackets dispose d'une interface minimaliste et très bien pensée, mais il regorge également de nombreux outils et fonctionnalités auquel s'ajoutent les différents plugins que vous pourrez télécharger en fonction de l'utilisation que vous souhaitez en faire. Vous pouvez le télécharger sur cette page.

Afin de s'y retrouver et de vous faire découvrir Brackets, j'ai listé pour vous les outils, fonctionnalités et plugins que j'ai trouvé intéressant de vous faire partager, avec en prime quelques astuces.

L'aperçu en direct

Parmi les nombreuses fonctionnalités de Brackets, l'aperçu en direct est certainement l'une des plus utiles, car elle permet, pendant que vous éditez votre code, de voir les changements que vous opérez directement dans votre navigateur préféré et ce, de manière instantanée et sans sauvegarde !
Pour rendre cela possible, il suffit simplement de cliquer sur le petit éclair situé en haut de la sidebar droite. une page devrait s'ouvrir dans votre navigateur avec votre site.

Surlignement dans l'aperçu en direct

Pour rendre cela encore plus interactif, sachez que depuis la version 1.9 de brackets, il est possible d'utiliser la fonction " surlignement dans l'aperçu en direct " mais dans les 2 sens. Je m'explique. Cette fonction était déjà implanté dans les éditions précédentes, mais ne fonctionnait que dans le sens éditeur --> navigateur. Dorénavant lorsque vous cliquerez sur une partie graphique de votre site dans le navigateur, la partie du code concernant celle ci ce mettra en surbrillance dans Brackets. Et donc inversement, si vous cliquez sur une partie de votre code, celle ci ce mettra en surbrillance sur la partie graphique de votre site dans le navigateur. Pratique non ?

Pour l'activer, il faudra ce rendre dans "affichage"  dans la barre d'outils du haut et cliquer sur " surlignement dans l'aperçu en direct ".

Édition rapide

Comment gagner du temps sans avoir à naviguer entre ses différents fichiers à éditer ? En utilisant l'édition rapide ! C'est une fonctionnalité  accessible dans vos documents HTML par un simple raccourci ( ctrl + E ) ou avec un clique droit. Elle permet, comme son nom l'indique d'éditer rapidement le code CSS rattaché au sélecteur choisi directement dans votre code HTML.

édition rapide des couleurs

Une autre fonction très intéressante avec l'édition rapide, c'est celle qui permet d'éditer rapidement les couleurs dans vos fichiers CSS en faisant apparaître un éditeur chromatique. Tapez dans votre fichier CSS une couleur quelconque, pour un background par exemple : background: #000; positionnez vous sur le code couleur et faite ctrl + E ... Magie :)

Documentation rapide

Si vous avez un trou de mémoire quand à l'utilisation de tel attribut avec tel style CSS,  vous pouvez vous appuyer sur cette documentation ( En Anglais ) fournie par webplatform.org en faisant un clique droit ou un ctrl + K sur le style en question.  Il sera possible, pour plus de documentation, de ce rendre sur leur site internet depuis un lien " en savoir plus ".

Note : Au moment ou j'écris, le lien " en savoir plus " est inopérant. Il renvoi vers une erreur 404 car la doc a changé d'adresse et n'est plus en sous-domaine. Ce sera sûrement réglé dans une prochaine mise à jour.

Complétions automatique

Toujours dans l'optique de vous faire gagner du temps, une fonction de complétions automatique du code à été ajouté. Par exemple, commencez par ouvrir un crochet dans votre document HTML , une liste déroulante apparaîtra avec les différentes balises utilisables, ajoutez une lettre pour réduire la liste, D pour div par exemple, il vous suffira alors de sélectionner dans la liste la balise qui correspond à une div pour compléter votre code, enfin fermez les crochets pour ajouter la balise de fermeture. Il en sera de même avec vos styles CSS et certaines fonctions Javascript et Jquery.

Navigation simplifié entre vos différents documents

Vous connaissez l'existence des touches suivant ↑ et précédent ↓ ? Les utilisez vous souvent ? Car dans mon cas, mise à part quand je désactiver le pavé numérique par inadvertance, et que je me rappelle leur existence en voulant écrire 9 ou 3 ( Ça vient de Saint Denis bébé ... ) , je ne m'en sert pas beaucoup. Non, mais plus sérieusement, en utilisant les touches ctrl + ↑ ou ↓ vous pourrez naviguer entre vos différents documents composant votre projet. C'est donc un moyen rapide (2spi ? ) d'accéder à vos documents. ( j'avais dit sérieux ? :)

Lier son serveur local à Brackets

Cette fonction est très utile car elle s'utilise en commun avec wampserveur 3 ( par exemple ). Elle permet donc de lier le dossier de projet que vous utilisez dans Wampserveur 3 à Bracket. Elle est surtout utile quand vous avez une configuration particulière pour votre serveur et que vous souhaitez la tester en live. Elle est disponible dans fichier >>> Paramètre de votre projet, il suffira de rentrer l'adresse de votre serveur local, par exemple http://localhost/mon-site-trop-bien pour pouvoir en profiter. Et bien sur l'aperçu en direct fonctionne aussi avec cette fonction.

Toujours plus de fonctionnalités dans Brackets

Je pense avoir fait le tour du gros des fonctionnalités et outils de Brackets, Cela dit, il existe quelques petites chose pratiques comme l'arborescence dans le code, qui permet d'ouvrir et fermer certains de vos blocs de code de façon a travailler plus efficacement. Avec ça vient la numérotation des lignes ainsi que le code en couleurs ( je ne me souvient plus du terme... c'est pas sérieux tout ca ! ) , un classique me dirait vous. La recherche et le remplacement au sein d'un document ( amélioré avec la version 1.9 ). Vous avez également la possibilité de modifier Brackets... Et oui, il est lui même codé en HTML CSS JS !  Les outils de développement sont là pour ça, il sont accessible directement depuis le menu déboguer ou en appuyant sur F12.

Les extensions pour Brackets

Il encore possible d'améliorer Brackets grâce à des extensions.  Les extensions sont très nombreuses et ajoutent nombre de fonctionnalités à Brackets.
Je vous ai simplement fait une petite liste de celle que j'utilise régulièrement mais comme dit précédemment, il en existe beaucoup, vraiment beaucoup en dehors de cette liste, donc cherchez, installez, essayez et si elle vous plaise, adoptez :).

note :Pour installer l'une d'entre elle, et les gérer, il faut cliquer sur l'icône en forme de bloc situé a droite sous celle de l'aperçu rapide. Pour voir les options liées aux extensions, rendez vous dans " modifier " dans la barre de tache de barckets.

Emmet

Emmet est un workflow HTML et CSS que je qualifierais d'essentiel en production, car elle vous permettra de gagner un temps considérable dans l'écriture de vos codes sources. Le seul inconvénient c'est qu'il faudra bien sur le prendre en main, mais une fois que sera le cas, vous ne pourrais plus vous en passer. Personnellement je n'ai pas encore saisie toutes les subtilités de cette extension, je me rends donc régulièrement sur la documentation " Cheat Sheet " qui est d'une aide précieuse.

AutoPrefixer

Cette extension permet d'ajouter les préfixes nécessaires au bon fonctionnement de certaines règles CSS avec les navigateurs propriétaires. Au choix, vous pouvez l'utiliser à la sauvegarde du document, lorsque que le fichier est modifié ou bien en sélectionnant une règle à préfixer et en appuyant ensuite sur ctrl + maj + p.

Beautify

Simple mais au combien utile, voici la baguette magique qui vous permettra de mettre en beauté votre code. Une fois installé, l'icône pour l'utiliser ce trouve placé sous le bouton des extensions à droite, cliquez dessus et magie !

Js css minifier

Cette extension vous permet de minifier vos fichiers CSS et JS afin de réduire leur poids. Vous pouvez choisir de créer une copie minifier à l'enregistrement de votre fichier ou en enregistrer une en cours de travail.

Schnapsum

Vous connaissez le Lorem Ipsum ? Et bien dite bienvenue au Schnapsum ! Créé par Alsacréations, il s'agit d'une extensions permettant de remplir vos pages avec du faux texte... en Alsacien, histoire de changer un peu du latin !

En conclusion

Je pense vous avoir fait faire le ( grand ? ) tour de Brackets. Comme vous avez pu vous en rendre compte, c'est un éditeur de code vraiment complet et personnalisable selon vos besoins, notamment grâce à ces extensions très nombreuses. Je ne peux que vous recommander de vous le procurer, vous ne le regretterez pas. Si vous souhaitez apporter votre pierre à l'édifice et me suggérer quelques extensions ou autres à ajouter dans cette article, n'hésitez pas. Sur ce je vous souhaite une bonne journée !

]]>
Sun, 14 May 2017 15:56:01 +0100
<![CDATA[ Comment filtrer et exclure les robots de vos rapports Google Analytics ]]> http://www.orditips.com/article-120980-filtrer-robots-dans-google-anal.html Logo Google Analytics
© Google - Source photo : Wikipédia

Bonjour à tous,

Afin de filtrer et d'exclure de vos rapports Google Analytics les différents robots qui peuvent crawler les pages de votre site web, et qui par conséquent faussent quelque peu vos données en ajoutant des visiteurs qui n'en sont pas vraiment, je vais vous présenter une astuce simple, mise en place par Google, afin d'en filtrer une partie assez facilement.

Comment filtrer les robots et les exclure de vos rapports Google Analytics

Il existe, dans Google Analytics, une option vous permettant de filtrer les visites provenant des robots connus par Google afin de les exclure de vos rapports et donc de ne plus les compter comme des visiteurs. Cette option est accessible depuis les paramètres de la vue utilisé pour afficher les données de votre site web.

Pour activer cette fonctionnalité, Il vous suffira donc de vous placer sur la vue pour laquelle vous souhaitez l'activer, de vous rendre ensuite dans administration, et dans la 3 ème colonne nommée " Vue " de sélectionner " Paramètres de la vue ". Ensuite il ne vous restera plus qu'à trouver la ligne " Exclure les robots " , cocher la case " Exclure tous les appels provenant de robots connus " et d'enregistrer.

Voilà pour l' astuce ! C'est aussi simple que cela et rapide à mettre en place et de plus cette option vous permettra de nettoyer un temps soit peu vos rapports dans Google Analytics.

]]>
Sat, 13 May 2017 09:00:01 +0100
<![CDATA[ { Tuto } 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. Dans ce tutoriel, 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 ;)  !

]]>
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.

]]>
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.

]]>
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 :)

]]>
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.

]]>
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.

]]>
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 ? ;)

]]>
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

]]>
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.

]]>
Fri, 22 Mar 2013 12:47:01 +0100
<![CDATA[ Nouvautè sur OrdiTips ! Kit graphique et template 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 !

]]>
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 !

]]>
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. */

]]>
Tue, 05 Mar 2013 07:59:01 +0100