Configuration d’apache 2 sur Debian

Aujourd’hui, nous allons faire le tour de quelques paramètres de configuration pour vos sites internet, sur un serveur HTTP Apache 2.
Si vous n’avez pas encore installé Apache 2 sur votre serveur Debian, vous pouvez vous référer au tutorial précédent « installation d’un serveur web ».

Activer / désactiver un module apache 2

La plupart des fonctionnalités sont implémentées dans des modules externes que le serveur Apache charge pendant sont initialisation.
Par défaut, seul les modules les plus courants et les plus utilisés sont activés.
Deux commandes sont disponibles, pour activer ou désactiver les modules supplémentaires. La première commande qui permet d’activer un module est

a2enmod nomDuModule

et la commande qui permet de désactiver un module

a2dismod nomDuModule

Module de réécriture d’url

a2enmod rewrite

on recharge la configuration d’apache :

 invoke-rc.d apache2 reload

Hôtes virtuels

Chaque hôte virtuel est décrit par un fichier placé dans le répertoire /etc/apache2/sites-available/ .

Créez un fichier dans ce répertoire nommé de la façon suivante : nomdedomaine.com
Le nom de domaine, ainsi que les chemins de log sont à modifier, en fonction de la configuration de votre serveur.Le fichier doit être de la forme suivante :

ServerAdmin postmaster@nomdedomaine.com
ServerName www.nomdedomaine.com
ServerAlias nomdedomaine.com *.nomdedomaine.com
DocumentRoot /var/www/monsite/

Options -Indexes FollowSymLinks MultiViews
AllowOverride All

ErrorLog /var/log/apache2/site/nomdedomaine/error.log
LogLevel warn
CustomLog /var/log/apache2/site/nomdedomaine/access.log combined
ServerSignature Off

on active avec

ln -s /etc/apache2/sites-available/nomdedomaine.com /etc/apache2/sites-enabled/nomdedomaine.com

on redémarre le serveur :

 invoke-rc.d apache2 restart

voilà c’est fini, vous pourrez tester le nom de domaine dans votre navigateur préféré Firefox ou Chrome ! 🙂
( à conditions que votre serveur de DNS soit également configuré ) à voir dans le prochain tutorial « Configuration du serveur de DNS Bind »

Configuration des DNS dans Bind

Le service de gestion des noms de domaine est essentiel sur internet. Il permet d’associer des noms à des adresses IP, ce qui permet de saisir www.google.fr au lieu de 173.194.67.94, dans la barre d’adresse URL de votre navigateur.

Les informations DNS sont regroupées par zone, correspondant chacune à un domaine ou une plage d’IP.Le serveur primaire est prioritaire sur le contenu d’une zone. Le serveur secondaire qui doit être de préférence sur un autre serveur, n’est qu’ une copie du primaire.

Chaque zone peut contenir différents types d’enregistrement :
A : attribution d’une adresse IP v4.
CNAME : définition d’un alias.
MX : définition d’un serveur de courrier.
NS : correspondance du nom de domaine vers le serveur.

Nous allons voir comment configurer un nouveau nom de domaine sous Bind :
Si ce n’est pas déjà fait installez Bind

 aptitude install bind

pour un nom de domaine mondomaine.com.
Le @ fait référence à mondomaine.com.
Le mail doit être un mail valide et le @ est remplacé par un . exemple : admin.mondomaine.com correspond au mail admin@mondomaine.com.
ns1 = serveur primaire de nom
ns2 = serveur secondaire de nom
ns0 = serveur de messagerie
173.194.67.94 = ip de votre serveur

creation du fichier db.mondomaine.com dans /etc/bind/

nano db.mondomaine.com
$ttl 86400
@   IN SOA mondomaine.com. admin.mondomaine.com.(
2012041201 ;serial
21600 ;refresh
3600 ;retry
604800 ;expire
86400 ) ; negative  cache TTL
@       IN      NS      ns1
@       IN      NS      ns2
@       IN      MX      10 mail
@       IN      A       173.194.67.94
www             IN      A       173.194.67.94
mail            IN      CNAME   ns0
smtp            IN      CNAME   ns0
pop             IN      CNAME   ns0
pop3            IN      CNAME   ns0
imap            IN      CNAME   ns0
sql             IN      A       173.194.67.94
mysql           IN      A      173.194.67.94

Editez les deux fichiers suivant :

nano named.conf.local

et

nano zones.conf

puis ajouter en fin de fichier :

zone "mondomaine.com" {
type master;
file "/etc/bind/db.mondomaine.com";
};

on redémarre Bind :

invoke-rc.d bind9 restart

voila vous n’avez plus qu’ à configurer le domaine sous apache si ce n’est pas déjà fait, comme dans le tutorial précédent : configuration d’un site sous apache

Développement d’un composant Clavier intuitif en Flex

Je vais vous présenter un composant, dont nous aurons besoin dans un projet d’application tablette ( Android / ios Apple ) destiné aux opticiens.
Ce composant est un clavier intuitif. Son fonctionnement de base est simple : nous lui donnons une liste de mots dans laquelle le clavier fera une recherche . Il classera alors les mots, et proposera les touches possibles pour la suite du ou des mots correspondants.

Par exemple pour la liste des mots suivants :
[ android, apple, tablette, mobile, developpement, application ]

voici notre clavier de départ :
composant-flex-clavier-01
Imaginons que nous appuyons la touche « A » le tableau se triera de cette façon :
[ android, apple, tablette, application ]
et le clavier se réactualisera de cette manière :

composant-flex-clavier-02

Pour correspondre aux lettres suivantes : [ android, apple, tablette, application ].
Et ainsi de suite jusqu’à obtenir un résultat de recherche satisfaisant.
Une fois se composant de base réalisé, nous ajouterons des fonctions plus poussées. telles que l’intégration d’un autre composant, de reconnaissance de forme que je vous détaillerai dans un prochain article.

AS3 stage.stageWidth et stage.stageHeight sur mobile Android IOS

androidappleAujourd’hui nous allons voir comment résoudre le problème de résolution d’écran pour vos applications Android et Iphone.
Sur un projet classique as3, destiné au navigateur internet, nous récupérons la largeur et la hauteur de la scène:

 stage.stageWidth; // largeur

stage.stageHeight //hauteur

Néanmoins je ne sais pas si c’est dû à un bug Adobe, mais les valeurs retournées par stageWidth et stageHeight sur un portable Android ou Iphone ou encore une tablette, sont erronées.

La seule solution que j’ai trouvé pour palier à ce problème c’est d’utiliser la classe Capabilities dont son rôle est de fournir les propriétés du système qui héberge l’application.

il suffit donc de remplacer stage.stageWidth par Capabilities.screenResolutionX et stage.stageHeight par Capabilities.screenResolutionY. Ces deux fonctions nous retournent la hauteur et largeur de l’écran ou est exécutée l’application.

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