Auteur : Adelin GROSJEAN

Encodage des images en base64 pour votre CSS

css3-logoPour un premier tutoriel dans cette section CSS, je vais vous parler d’une méthode simple, mais efficace pour diminuer le nombre des requêtes http de votre site internet, mais également gagner un temps certain dans vos futurs développements de site internet.

Encoder une image en base64

Le principe est très simple, il suffit de transformer une image en string puis de coller cette chaîne de caractères dans sa feuille de style css avec le code suivant :

data:image/png;base64

Pour encoder votre image il existe deux méthodes différentes.Soit passer par une application en ligne, comme par exemple celle-ci :
http://www.motobit.com/util/base64-decoder-encoder.asp
ou bien encore avec une commande shell linux :

openssl base64 -in image.png | tr -d '\n\'

la partie avec le pipe | tr -d ‘\n\’ permet de supprimer les retours chariot tous les 64 caractères.

Utilisation de l’image en base64 dans une feuille de style

Maintenant que vous savez comment obtenir votre chaîne de caractères, il ne reste plus qu’à l’exploiter dans votre feuille de style css :

   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAAHElEQVR42lXGwQkAAACCwPZfyeHKb8KBAWrR/QDr+RJVVNWLAAAAAABJRU5ErkJggg==");

Compatibilité des images en base 64 avec … Internet Explorer

Comme vous devez déjà vous en douter les images en base 64 ne sont pas interprétées par les navigateurs Internet Explorer 6 et 7. la seule solution reste un hack en ajoutant son image avec la méthode traditionnelle pour ie.

Quelques outils

Je vous donne quelques balises utilisant les images en base64.J’utilise ces balises dans tous mes thèmes / templates :

Info
.info {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACA0lEQVR42u2Xyy5DQRzGPYKlR+hDeAg7W0tLEksLO7GxFtG400QsJCIo1QuCVltU2zQtkSYERfSaEsb5baQ3Z3qYNhYj+ZJx5vt/88vcek6HEOJfSwNqQA2oATXgH4qXvWe9s65gcsrpf5/YPBaV4hl9eNoO6PCddU/vBl4AmXGdipWDC7F2HK0Sz+jDg5eatgAuecKjk1snn/N7QbERiIvtUMJUePBSQ60CQCmcWD2MMLglUUOtVUhLy2rsq491f6whQPj6NvWcLzoQ7UYeaskgSzkg+8hs5jLZwrjhsyHaZjNJllJATiL7yGwJ3ZGrfryItpmXLDKVAXJdyA6EfSdQZH8tuEPDtGUHh0xlgMagOdkhWPaGv+/ARU9IyPxkKgPkTjMbzPgbqZUMkExlgFy8JoMxa3VLJgMkUxmgs4nB2PhWAMlUBui7vG7mF8MSIJnKAP2J9B2hElkCJFMZYCz94FINSKYywMfX/KDrPKkMkCwyVQGirmj6Pmo2aOruqQqQ/3/ykkWmMkCUK5WHjuI3OdnsyWaRDLJa8brVaSyL3R1J/XQX1qrOQy0ZZLUCENmesoW5+pmUixpqyWj1K7+tWH4bYx81c3Dw4KWG2nZ9NLFEfflSeSJ5m9nnTuPirRTP6MODl5p2f9UhTmKPoYEGLwwD9OHR38UaUANqQA34e30BMUs2UusQeogAAAAASUVORK5CYII=") no-repeat scroll 0 0 #EBF5FA;
border-color: #D2DCE1;
}
Important
.important {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABIklEQVR42u3XQUrDQBTGcY+QI3gEj+At3PYG4qYgpeDOhSCCuO89ilCwhS6Eloq4cZET6ERMipuO+WcZgo2fzCTgW3xkSN7r/JhJSHrgve91DGhAAxrQgH/8gY/lxYl7OH99vz/bvU1PPWHMOa51CszmoxWg8ug/Hy99vr4ijDlXYanpBMgKudmwAm1f7hrDNWqojQpkVZi4eL4F8lOoASmvpHTP1XCtkco9KW1tvrlm4l+FHnqDA7PF+IsJldAbHMgTqgLpDQ4snm5kIL3BgeVEqQqkNwZwogLpjQE8LOMEnKNXASrIgQAcRH3VsV3C1qpAHSngogKTFsCkMyDZB6TGgAESF8iXc1PiAPXXX9on4HENyfjI/nYa0IAGNOA/AH4DB0n6mf9lZv8AAAAASUVORK5CYII=") no-repeat scroll 0 0 #FFFAE6;
border-color: #FAE6BE;
}
Attention
.attention {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB/UlEQVR42u2Xyy4DURjH7Wy9gNj0MbyHN7CWWFtLRKp1q6pqq9WqiEsQtwWCRCLhBWzMpXcqkYi6jfmJEaYzbWOm2sVZ/JMv813Ob86c75wzHZqmtbUEoAAUgAJQAArANgBU08E+KTr2eBMa0ZAc85fV9Gxv2wBK894XdSmo5Tbin1ISUxrAbQGoLE4dqcshrbC38ksA42spIJ9Rjvpe8zvLVYA8w0dMywBZa9n1GECWwicvjGdbAqimZoZZawbM/eXp9XO5OI2wv54DqBH7r4D6muuRor5KfnvpG/ApI/l1XzfCNp4TQyw5DgCdN0bpcKvf8GP/9BH714b5254X8VZ3bTo4/v0CqcCc2U8OuU0HpDHY68wASnL63IjBNvvJIbepgMyMkgxYdqzuKxpx2FYx5FLDfUCjMSLeN6s9z1hn7HkI2yqGXGpQy3VAJTF5lVkJ2+55uc3k556HsO3iqCHHJ65dBdSPrQE55mOAWgIQNRRHTdcAOfhrzQq6Ozt4qJRyEYRdK5Za1HQDkI5c4+CvNyuVQmZWj/cgbJPf9jLhGNDUGPbaXxsycrBNftvLhCNA/fLZlVtfqAuHpPDoO2cuwm4kh9qM4WQGO8sXx9lGBsuuRhgMYTf0UtR2/Ik5+G9PdinoqqhJbTe6mIU/2CR5xF+dABSAAlAA1tYHSwv5Nu1eZ98AAAAASUVORK5CYII=") no-repeat scroll 0 0 #FFF0EB;
border-color: #FFD7CD;
}

HTML5 et Datalist

html5-logoRemplir des formulaires sur un site est toujours long. Aujourd’hui en HTML5 grâce au composant datalist vous pouvez désormais proposer un choix multiple à vos utilisateurs, tout en leur laissant la liberté de saisir ce qu’ils souhaitent.

Les options peuvent être jumelées avec un datalist en spécifiant son id dans l’attribut  list d’un input :

<input type="text" value="" placeholder="saisissez la lettre 'a'" list="listOs" />
<datalist id="listOs">
<option value="Apple"></option>
<option value="Android"></option>
<option value="BlackBerry"></option>
</datalist>

démo :

Le composant datalist  est largement compatible avec les dernières versions de Firefox, Opéra, Chrome, et Internet Explorer 10.

Facebook AppCenter : Facebook lance son AppStore

facebook_appcenterUne nouvelle qui vient d’être publiée officiellement sur le blog des développeurs Facebook. Le réseau social qu’on ne présente plus va lancer son appstore pour les plus de 900 millions d’utilisateurs de Facebook. Une nouvelle place de marché,va donc bientôt rentrer en scène au coté des deux mastodontes que l’on connait déjà, l’Appstore d’Apple et Google Play pour les appareils Android.

Vous pourrez trouver l’ appCenter de Facebook d’ici quelques semaines à l’url suivante : http://www.facebook.com/appcenter , celle-ci n’est pour le moment pas encore activée.
La position des applications sera déterminée par plusieurs critères dont les commentaires et les votes des utilisateurs.
Des outils seront fournis aux éditeurs des applications pour qu’ils puissent tracker les actions et avis des utilisateurs.
L’ appcenter redirigera pour les utilisateurs de smartphones et tablettes pour le téléchargement, directement sur l’appstore ou google play, en fonction de la marque et du système de l’appareil.

Flash Builder 4.6 BUG loading workbench .snap

bug-flash-builder-4Pour ceux qui comme moi auraient leur FlashBuilder qui reste figé sur l’initialisation du Workbench ! Ne faîtes pas de réinstallation ! voici la solution à votre problème :

Pour les versions de Flashbuilder 4 à Flashbuilder 4.6 voici ce qu’il faut faire :

  1. Killez le process de Flashbuilder.exe si il est encore en exécution.
  2. Supprimez le fichier .lock dans le dossier :
    C:\Users\{votreNom}\Adobe Flash Builder 4.6\.metadata
  3. Supprimez le fichier .snap dans le dossier :
    C:\Users\{votreNom}\Adobe Flash Builder 4.6\.metadata\.plugins\org.eclipse.core.resources
  4. Et pour ceux qui ne trouvent pas comme moi ce fichier .snap allez dans
    C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6
    et exécutez FlashBuilderC.exe

Voila, votre problème doit être réglé ! 😉

bug-flash-builder-4.6

Comment obtenir plein de Like (J’aime) Facebook ou de Follow Twitter ?

logo128Comment faire pour être beaucoup Aimé (Like) sur Facebook ? et être beaucoup suivi (Follow ) sur Twitter ?

Voici la nouvelle version de LikeAndFollow 2 disponnible gratuitement et en téléchargement ici au choix :

Sur le site vous découvrirez un logiciel, qui une fois installé sur votre pc, vous permettra de faire de l’échange de like (j’aime)  Facebook, mais également dans une prochaine version des échanges de follow (abonnés) sur Twitter, ou encore des Plus one de Google et du trafic pour vos sites internet.

 

l’application est en cours de refonte en version 2, cet article sera bientot mis à jour avec un téléchargement en direct sur cette page

 

Le principe est simple :

  1. Il faut tout d’abord télécharger l’application like-follow.me sur le site www.like-follow.me en cliquant simplement sur l’image dans la première page.
  2. Lancer l’application qui se trouve sur votre bureau.
  3. Pour le premier lancement indiquer votre mail et cliquer connexion.
  4. Une fois sur le menu principal choisir entre Facebook / Twitter / Google +One / Trafic sur votre site internet. (la version est actuellement en Beta, pour le moment seul facebook est activable)
  5. Une fois sur le menu secondaire sélectionner « Ajouter une page »
    like-follow-3-1024x590
  6. Renseigner les informations du formulaire en entête : Adresse de votre page facebook, catégorie de votre page, cpc c’est le coût que vous voulez dépenser (en points) à chaque clic (like, follow, visite … ), et le budget : c’est le maximum que vous voulez allouer en crédits pour cette page.
    like-follow-4-1024x613
  7. Retourner au menu précédent en cliquant l’icône planète à gauche de l’interface.
  8. Voila, des visiteurs vont venir cliquer votre bouton j’aime sur votre page facebook.
  9. Pour gagner des crédits vous pouvez cliquer sur « Gagner des Crédits », puis Liker des pages qui se présenteront à vous.

Je complèterai cet article suivant l’avancée de l’application. Une version 2 est en préparation.

Créez un e-commerce à partir de WordPress c’est tout à fait possible avec plugEcom :

  • + votre nom de domaine
  • + hébergement
  • + WordPress
  • + le module e-commerce plugEcom

50 € /mois le tout !
créer boutique en ligne

www.like-follow.me pour faire le plein de Like / Follow et trafic internet !

Des Likes et Follow en masse !

Je ne sais pas si vous connaissez déjà, mais voici le premier soft pour
avoir plein de Like Facebook , Follow Twitter et qui vous permet de booster le trafic sur votre site internet ! Il est entièrement gratuit et sans aucune contrainte ni limite !

Voici la version 1.0.5 !

Avec en ajout l’interface Twitter, et l’auto Surf pour booster la fréquentation de votre site ! Une refonte de l’interface a été effectué.

L’installation prend moins d’une minute et il suffit pour ce faire d’aller sur ce site :  http://www.like-follow.me et de cliquer sur l’image. ce qui aura pour effet de proposer l’installation directement sur votre pc /mac.
Un vrai jeu d’enfant ! Likez bien !  🙂

Leap motion une nouvelle façon de prendre le contrôle !

Ce lundi 21 mai 2012 la startup Leap, vient de nous dévoiler son dernier petit bijou de technologie !
Ce petit boitier va vous donner le pouvoir de prendre le contrôle de n’importe quel pc ou télé du bout des doigts, avec une fluidité et une précision sans précédent !

La vidéo parle d’elle même :

http://www.youtube.com/watch?feature=player_embedded&v=_d6KuiuteIA

 

Ce boitier sera disponible à partir de Décembre 2012 pour la somme de 70$ soit environ 55 € ! vous pouvez bien sur pré-commander votre nouveau GeekToys sur le site officiel :

https://live.leapmotion.com/order.html

Simuler la souris, le clavier ou contrôler les fenêtres des autres applications en Adobe Flex AIR

botAujourd’hui je vais vous présenter brièvement ma nouvelle librairie AIR qui permet entre autres de prendre le contrôle et de simuler un clavier, une souris sous Flex  AIR.
Ces fonctions peuvent s’avérer très utiles lorsque vous créez des programmes pour automatiser certaines tâches du quotidien, en d’autres termes la création de « Bot ».

Cette class est à peu prêt l’équivalent de la class Robot en java.

  1. Commencez par créer un nouveau projet AIR.
  2. Ajoutez dans « properties > Flex build path > Library path » le fichier Robot.swc
  3. Placez l’exe pbot.exe à la racine de votre projet.
  4. Créez un objet de type Robot
  5. Appelez les différentes fonctions de l’objet tel que setClick, setKey, …

Procédure d’installation de la démo :

  1. Téléchargez l’installation ci-dessus.
  2. Installez puis acceptez si le parfeu windows vous demande l’autorisation pour le fichier pbot.exe
  3. cliquez les différents boutons « Go » pour tester quelques unes des fonctions de la librairie Robot.swc .
  4. Vous pouvez lancer Firefox pour faire les tests de Handle application.

Voici le code de l’application :

<!--?xml version="1.0" encoding="utf-8"?-->

<![CDATA[ import com.ideva.fr.robot.Robot; import com.ideva.fr.robot.RobotEvent; import mx.events.FlexEvent; private var robot:Robot; protected function creationCompleteHandler(event:FlexEvent):void { robot = new Robot(); initEvent(); } protected function closeHandler(event:Event):void { robot.exit(); } protected function initEvent():void { robot.addEventListener( RobotEvent.CONNECT, robotConnect ); robot.addEventListener( RobotEvent.RESULTHANDLE, resultHandle); robot.addEventListener( RobotEvent.RESULTPOSWIN, resultPosition); } protected function robotConnect( evt:RobotEvent ):void { menuGe.visible = true; } /*********** Windows position ************/ protected function position_clickHandler(event:MouseEvent):void { //robot.firstPlan("Firefox"); if(inName.text.length > 0)
robot.getHandleWindow(inName.text);
}

protected function resultHandle(evt:RobotEvent):void
{
log.appendText( 'result handle window '+String( evt.window.handle )+"\n" );
//get position
robot.getPositionWindow( evt.window.handle );
}

protected function resultPosition(evt:RobotEvent):void
{
log.appendText( 'result position window :'+String(evt.window.position)+"\n" );
}

protected function first_clickHandler(event:MouseEvent):void
{
if(inName2.text.length > 0)
robot.firstPlan(inName2.text);
}

/************** Mouse click **************/
protected function autoClick_clickHandler(event:MouseEvent):void
{
robot.setClick( new Point(Number(inXmouse.text), Number(inYmouse.text)) );
}

/************** Key control **************/
protected function keypress_clickHandler(event:MouseEvent):void
{
focusManager.setFocus( inRes );
robot.setKey( inKey.text );
}

protected function string_clickHandler(event:MouseEvent):void
{
focusManager.setFocus( inRes2 );
robot.setString( inStr.text );
}

]]>

Gestion des DLL en Flex AIR et contrôle des pixels

Au travers de la librairie que je viens de créer je continue à étendre les capacités de l’environnement AIR Adobe.

Gestion des DLL en AIR

Une des fonctions qui m’a le plus souvent manqué et sans aucun doute la possibilité d’exploiter des .dll ou .so dans une application AIR. C’est la raison pour laquelle je viens d’ajouter deux fonctions pour gérer les .dll dans la dernière librairie que je vous ai présenté dans un autre article que vous pouvez retrouver ici : Simuler la souris, le clavier ou contrôler les fenêtres des autres applications en Adobe Flex AIR

La première fonction permet de charger un fichier .dll et de faire appel à une des fonctions de la librairie.

protected function dll_clickHandler(event:MouseEvent):void
 {
 var param:Array = new Array(750,300);
 robot.callDll( "Kernel32.dll", "Beep", param );
 }

La seconde fonction permet de lister les fonctions présentes dans un fichier .dll :


protected function listfunctiondll_clickHandler(event:MouseEvent):void
 {
 robot.listDllFunction( "User32.dll");
 }

 protected function listFunctionDllResult(evt:DllEvent):void
 {
 for each (var str:String in evt.listFunction)
 trace('function : '+str);
 }

Gestion des pixels de l’écran ou d’une fenêtre

Deux nouvelles fonctions ont également été ajoutées. La première permet de changer la couleur d’un pixel sur l’écran dans une zone définie entre deux points. La seconde vous retourne la valeur de la couleur du pixel dont la position aura été prédéfinie dans les paramètres de la fonction.


protected function draw_clickHandler(event:MouseEvent):void
 {
 robot.drawZone(new Point(100,230), new Point(412, 600), 255, 50, 200 );
 }

protected function getPixel_clickHandler(event:MouseEvent):void
 {
 robot.getPixel(new Point(600,20), 0);
 }

protected function resultColorPixel(evt:RobotEvent):void
 {
 trace( "pixel color : "+evt.color+'\n' );
 }

Installer Google Analytics sur Magento 1.7

Installation Google Analytics sur Magento

Magento_logoInstaller un compte Analytics sur Magento n’est pas très compliqué en soit, mais sur les dernières versions (à partir de la 1.4) Magento cache quelques bugs très gênants concernant Google Analytics . Nous allons commencer par voir comment faire une installation classique.

Magento 1.7 propose en natif un module Google Analytic que vous trouverez dans la partie admin :
Système / Configuration / (colonne de gauche ) / API google / Google Analytics /

Parametres :

  • Activer > oui
  • Numéro de compte : UA-XXXXXXXX-X (attention avec les copier / coller et le caractère – )
Sauvegarder la configuration, voila normalement le compte est en place. Néanmoins un bug persiste depuis quelques versions de Magento (1.4 à 1.7) si vous consultez vos statistiques vous vous apercevrez que le marqueur Analytic ne fonctionne pas.
Pour corriger ce problème suivez les instructions suivantes :

Corriger le bug Google Analytic, Magento 1.7

Éditer le fichier suivant : magento/app/code/core/Mage/GoogleAnalytics/Block/Ga.php
Ajouter la ligne suivante : (ligne 94) var _gaq = _gaq || [];
Renommer ou supprimer le fichier suivant : magento/app/design/frontend/default/{votre theme}/layout/googleanalytics.xml en .xml.bkp par exemple.
Vider votre cache Magento.
Voila cette fois-ci vérifier votre marqueur dans la partie temps réel de Google Analytics : Accueil / Temps Réel / Vue d’ensemble.