nFrey.com | Nicolas FREY » Internet

Mozilla Firefox – Extensions et développement

Nicolas Frey — Fri, 27 Feb 2009 14:24:45 +0000

Mozilla Firefox est l’un de mes navigateurs préférés. Pas seulement pour développer, mais aussi pour ses performances, son interface, et son lot d’extensions fort sympathique.

Il existe de nombreuses extensions qui apportent un gain considérable dans l’utilisation de Firefox. Voici la liste des extensions que l’utilise couramment:

Adblock Plus: Pour supprimer la publicité
DownloadThemAll: Pour accélérer les téléchargements
Firebug: Pour déboguer une page html/javascript
Foxmark: Pour sauvegarder marque-pages et mots de passe
Tab Mix Plus: Pour une gestion améliorée des onglets
Web Developer: Une barre d’outils pour le développement

Tous ses outils sont vraiment très bien, je vous propose donc deux liens qui vous les présentent plus précisément.

Alsacreations
Vous y trouverez un article qui reprends les 20 meilleures extensions Firefox pour développeurs web. (Firebug, WebDeveloper Toolbar, Validateurs, IE Tab, Colorzilla, Fireshot, Dust-me Selectors, MeasureIt, SmushIt, FirePHP, Live HTTP Headers, X-Ray, Greasemonkey, …)
Voici le lien: http://www.alsacreations.com
Developpez.com
Vous y trouverez un article sur les meilleurs extensions Firefox. Principalement orienté pour le développeur. (Adblock, IE tab, GetJetableMail, Tab Mix plus, ScrapBook, Web developer, Gtranslate, FireFTP, ChatZilla, SecurePassword, View Source Chart, Firebug, …)
Voici le lien: http://www.developpez.com

Avec ces deux articles, vous voilà parti pour travailler plus facilement et proprement avec Firefox.

Une URL raccourcie sur votre domaine … pourquoi pas vous ?

Nicolas Frey — Thu, 21 Aug 2008 13:43:20 +0000

Il existe beaucoup de site pour faire des raccourcies URL mais pourquoi ne pas le faire sur votre propre domaine ?

Le développement est relativement simple, il suffit d’un serveur acceptant le PHP, d’une base de données et si possible la redirection d’url activé (mod_rewrite sous Apache). Le développement tient dans un script et un fichier .htaccess pour la redirection des URL.

La base de données contient une table avec un identifiant unique qui représente la clé d’accès et l’URL du lien sur lequel on veut rediriger.

CREATE TABLE `tinyurl` (
  `hash` varchar(16) NOT NULL,
  `url` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`hash`)
);

Le script PHP est loin d’être du code objet ou encore utiliser Zend Framework, mais pour un petit outil du genre un bon vieux code en procédural devrait faire l’affaire. Le script n’est pas très complexe. On a une partie pour afficher le formulaire, une fonction pour la création du hash, l’enregistrement dans la base de données et une fonction pour rechercher l’URL associé au hash.


 
// Fichier qui contient les paramètres de connexion.
require_once('config.php'); 
 
/**
 * Connexion à la base de donnée
 */
$conn = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD)
        or die("Impossible de se connecter");
$db = mysql_select_db(DB_NAME, $conn) or die(mysql_error());
$table = "tinyurl";
define('HASHSIZE', '5'); // Taille du hash
 
/**
 * Recherche par rapport au hash passé en paramètre
 * et redirection sur l'URL.
 */
function renvoyer($hash) {
   global $table;
 
   if(is_hash($hash)) {
 
     $req = "SELECT * FROM $table WHERE hash = '$hash';";
     $res = mysql_query($req) or die("Query failed");
 
     if (mysql_num_rows($res) == 0) {
       print "Aucun id associé";
       return;
     }
     else {
       header("Location: " . mysql_result($res, 0, "url"), true);
       return;
     }
}
 
/**
 * Enregistrement de l'url avant son identifiant.
 */
function enregistrer( $url ) {
   global $table;
 
   if( !is_url($url) ) {
      print <<
                    {$url} n'est pas une url valide
                 
HTML;
 
      return;
   }
 
   // Test si l'url existe déjà et retourne le hash correspondant.
   // Évite les doublons inutiles.
   $req = "SELECT hash FROM $table WHERE url= '$url';";
   $res = mysql_query($req) or die("Query failed");
 
   // L'url existe déjà dans la base de données
   if ( mysql_num_rows($res) == 1 ) {
      $hash = mysql_result($res, 0, "hash");
 
      // A modifier en fonction de votre .htaccess et
      // des redirections d'url
      $adresse = "http://votredomain/" . $hash;
      print <<
                   Voici votre URL r&eacute;duite :
                
 
{$adresse}
 
HTML;
 
   }
 
   // L'url n'existe pas encore
   else {
 
      // Recherche un identifiant valide
      $ok = false; $count = 0;
      while (!$ok) {
 
         // Génération d'un hash
	 $hash = generateHash(HASHSIZE);
 
	 // Test si le hash n'existe pas déjà dans la base de données
  	 $req = "SELECT hash FROM $table WHERE hash= '$hash';";
	 $res = mysql_query($req) or die("Query failed");
 
         // Aucun résultat le hash est donc dispo
         if ( mysql_num_rows($res) == 0 ) $ok = true;
 
         // Nombre de tentative dépassée on arrête.
         if ( ++$count >= 10 ) break;
      }
 
      // Insertion de l'url dans la base de données
      $req = "INSERT INTO $table (hash, url) VALUES ('$hash', '$url');";
 
      // Insertion ok
      if (mysql_query($req)) {
         $adresse = "http://nfrey.com/" . $hash;
	 print <<
                       Voici votre URL r&eacute;duite :
                   
 
{$adresse}
 
HTML;
      }
 
      // Erreur d'insertion
      else {
         print <<
                      Une erreur s'est produite.
                   
HTML;
      }
   }
}
 
/**
 * Vérification de l'url
 * La regex doit être grandement améliorée pour prendre en compte
 * tous les types d'url possible.
 * ex: protocole://sdo.domain.ext:port/dossier/file?param&autres#ancre
 */
function is_url($url) {
   $motif_url=("^^(http|ftp|https)://([a-zA-Z0-9-]+.)?([a-zA-Z0-9-]+.)
               ?[a-zA-Z0-9-]+.[a-zA-Z]{2,4}(:[0-9]+)?(/[a-zA-Z0-9-]*)
               ?(.[a-zA-Z0-9]{1,4})?$");
   if (!ereg($motif_url, $url))
      return false;
   else
      return true;
}
 
/**
 * Génération d'un identifiant celui ci contient
 * des caractères alpha-numériques.
 * On lui passe en paramètre la taille que devra avoir l'identifiant
 */
function generateHash( $length ) {
 
   $hash = "";
 
   // Caractères possibles
   $possible = "0123456789abcdefghijklmnopqrstuvwxyz
                ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
 
   // Compteur pour la taille du hash
   $i = 0; 
 
   // ajoute un caractère aléatoirement au hash jusqu'à sa taille max
   while ( $i < $length ) {
      // Trouve un caractère de façon aléatoire dans la liste
      // des caractères possibles
      $char = substr( $possible, mt_rand(0, strlen($possible)-1), 1 );
 
      // Ne pas reprendre ce caractère s'il est déjà dans le hash
      if ( !strstr($hash, $char) ) {
         $hash .= $char;
	 $i++;
      }
   }
 
   // retour du résultat !
   return $hash;
}
 
/**
 * Vérification du hash
 * Doit contenir x caractères alpha numérique
 */
function is_hash($hash) {
   $motif_hash=("^([0-9A-Za-z]{" . HASHSIZE . "})$");
   if (!ereg( $motif_hash, $hash ))
      return false;
   else
      return true;
}
 
/**
 * Fonction d'affichage
 */
function affichage() {
 
   // Un id est passé en paramètre, on appel la fonction renvoyer
   if ( (isset($_REQUEST['id']) && !empty($_REQUEST['id']) ) ) {
      renvoyer($_REQUEST['id']);
   }
 
   // Retour du formulaire on créé une url, appel
   // de la fonction enregistrer
   else if ( (isset($_REQUEST['creer'])
              && $_REQUEST['creer'] == 'oui')
              && (isset($_REQUEST['url'])
              && !empty($_REQUEST['url']) ) ) {
      enregistrer($_REQUEST['url']);
   }
 
   // Affichage du formulaire pour la création de l'url
   else {
      echo <<

	  URL:


	
 
HTML;
  	}
}
 
?>
 

   
      TinyURL
   
   
       affichage(); ?>

Le hash sert donc à récupérer l’URL dans la base. L’URL récupérée depuis la base de donnée modifie aussitôt la page visualisée par l’utilisation de la fonction header().
Pour parfaire la chose, il faudrait créer un fichier .htaccess renvoyant les URL du type http://domaine/%hash% vers http://domaine/dossier/url.php?id=%hash% ….

Voici un exemple d’un fichier .htaccess

# Tester si le module apache existe

 
   # démarre la réécriture d'url
   RewriteEngine On
 
   # Redirection http://mondomaine/tinyurl sur le script php
   # (créé un petit lien)
   RewriteRule tinyurl$ /url/url.php
 
   # Redirection http://mondomaine/tinyurl/%hash% sur le script
   # avec le paramètre id
   RewriteRule tinyurl/([a-ZA-Z0-9]+)$ /url/url.php?id=$1 [L]

Vous avez maintenant de quoi faire vos URL courtes sur votre site perso. Mon script est très légèrement différent et adapté pour être intégré dans Wordpress vous pouvez le tester ici :

http://nfrey.com/LNS1e

Si vous avez des remarques ou questions, je reste joinable. Vous trouverez mes coordonnées sur la page « à propos« .

Configuration d’un environnement de développement (php/mysql)

Nicolas Frey — Mon, 21 Jul 2008 13:39:47 +0000

Développer un site web, beaucoup de monde peut le faire, mais développer proprement et efficacement ce n’est pas la même affaire.

Je vais vous expliquer comment vous configurer un environnement de développement php / MySQL sous Windows.

La première chose à faire, c’est l’installation des serveurs. Dans notre cas MySQL et Apache. Sur un serveur de production, il faudrait installer séparément apache, php et mysql pour avoir une configuration optimale, mais comme on veut se faire un espace de développement, il existe des solutions comprenant l’ensemble des applications nécessaires (wamp, easyphp, xampp…).

Personnellement j’utilise wamp. Pourquoi:

Son interface conviviale et sa simplicité d’utilisation (Accès rapide aux fichiers de conf, démarrage des services simplifiées …)
Des addons, qui permettent d’avoir plusieurs versions possibles et de pouvoir passer de l’une à l’autre facilement

Quel est l’intérêt de configurer sur sa machine locale un serveur web et mettre en place un virtualHost ?

Un dossier, une configuration, des fichiers logs différents pour chaque site.
Une racine et une configuration étant celle du serveur.
Une url (nom local) accessible rapidement pour chaque site développé. ex: www.monsite.com et www.monsite.local
Un développement en local permet de ne pas casser son site visible depuis internet. On peut donc faire tout changement sans porter atteinte à la visibilité du site.
Permet aussi de configurer son serveur local pour avoir un meilleur débogage.

Si vous êtes convaincu, Téléchargez wamp et installez-le. Une fois l’installation effectuée, il faut configurer l’ensemble. Le but du jeu est d’avoir chaque site web dans un dossier avec une URL locale (DNS) lui étant associée. On va donc commencer par modifier le fichier hosts en associant une IP à un nom. Ceci permettra d’accéder à notre machine via un nom plutôt que par une IP, ce qui permettra ensuite de configurer le serveur web sur ce nom.

C:\WINDOWS\system32\drivers\etc\hosts

# fichier hosts

127.0.0.1       	localhost # ligne par défaut

127.0.0.1		monsite.local # ligne à ajouter.

Une fois le fichier hosts modifié, on va changer la configuration d’apache, et ajouter un virtualHost sur le nom local de la machine. Un virtualHost est une zone qui est mappée sur un nom de domaine. On peut donc avoir sur la même machine avec une seule IP plusieurs site web avec chacun un domaine différent.

%install_dir_wamp%/bin/apache/apacheX.X.XX/conf/httpd.conf

Include conf/httpd-vhosts.conf # A décommenter.

%install_dir_wamp%/bin/apache/apacheX.X.XX/conf/httpd-vhosts.conf

NameVirtualHost * # écoute sur toutes les ip et tous les ports


    ServerName localhost
    DocumentRoot E:/dev/wamp/www # dossier par défaut de wamp
    ErrorLog E:/dev/wamp/logs/error_log # fichier de log
    CustomLog E:/dev/wamp/logs/access_log common # fichier de log



    ServerName monsite.local # dns que l'on retrouve dans le hosts
    DocumentRoot F:/workspace/monsite # emplacement racine du site
    DirectoryIndex index.php # fichier par défaut
    ErrorLog F:/workspace/monsite/logs/error_log
    CustomLog F:/workspace/monsite/logs/access_log common

Une fois les modifications effectuées, il vous faudra redémarrer le serveur web. N’oubliez pas de créer tous les dossiers nécessaires (dont les dossiers logs qu’Apache ne créé pas tout seul) et de passer en ligne Wamp. Si tout se passe bien, le serveur devrait redémarrer correctement et vous dévriez avoir accès via votre navigateur à http://monsite.local. Il ne vous restera plus qu’à télécharger un IDE comme Eclipse, Zend Studio ou encore Notepad++ pour développer vos sites, installer un système de contrôle de version (versioning) et configurer votre navigateur avec des outils pour simplifier le débogage.

Le web utile

Nicolas Frey — Fri, 04 Jul 2008 11:31:45 +0000

Internet est grand, internet est fort, mais il est certainement plus grand qu’il n’est fort, et ce, du fait que l’on a pas forcement les bonnes adresses.

Il existe un grand nombre de moteurs de recherche, un grand nombre d’outils, d’applications ou de sites d’informations. Mais les connaissez vous ou les utilisez vous ?
Je vais dans cet article vous faire une liste des sites que j’aime utiliser, voir ou lire. J’espère vous les faire découvrir et vous les faire utiliser.

Application en ligne

Google Calendar

Google Calendar est un agenda en ligne, il est très pratique et très conviviale. Il permet d’ajouter, de modifier et de voir son planning sur une journée, une semaine ou sur un mois. On peut mettre des alertes SMS, Email ou popup sur chacun des événements créés en choisissant la fréquence des rappels. Vous pouvez partager des calendriers, et en récupérer des partagés. Vous pouvez aussi utiliser les calendriers dans une application lourde type Thunderbird et Lightning ( Fournisseur pour Google Agenda ).

Google Documents

Google documents est l’openOffice ou Microsoft Office du web, il permet de créer en ligne des documents texte (de type Word), des feuilles de calculs (de type Excel) ou des présentations (de type PowerPoint). Les documents créés sont exportables en différents formats (OpenDocuments, Microsoft, PDF, HTML ou autres). Vous pouvez partager vos documents et travailler en collabaration. Si le même document est édité par plusieurs personnes vous avez en temps réél ces modifications ou tout autre changement. Depuis peu le support du PDF a été ajouté. Vous pouvez donc y stocker vos documents de type PDF pour les visualiser ou les partager

Google Maps

Google Maps est un système de cartographie du monde entier, il se démarque néanmoins des autres par ses fonctionnalités supplémentaires comme le partage et personnalisation de cartes, la vue satellite très précise, le relief et le fabuleux Street View qui vous permet de vous promenez dans une ville avec une vue panoramique (Malheureusement il manque encore beaucoup de ville en France mais c’est en cours …).
Google Maps est aussi disponible sur les téléphones portables et permet un positionnement sur la carte via la triangulation du réseau GSM (Peu précis).
Vous pouvez aussi télécharger l’application GoogleEarth qui permet une visualisation en 3D des bâtiments et du relief mais il ajoute aussi beaucoup de fonctionnalités.

Deezer

La tendance actuelle va à ce que l’on se déplace de moins en moins en magasin pour acheter des CDs. On veut tout, partout et sans attendre. De plus, le droit à la copie privée ainsi que certaines protections sur les CDs, nous empêches de les avoir partout et de nous en faire des copies pour les écouter en voiture ou au boulot.
Deezer permet légalement d’écouter tous types de musiques en ligne. Vous avez accès à un moteur de recherche qui permet une recherche sur des albums, des artistes ou des titres. Vous pouvez vous faire des playlists, et aussi utiliser une smartRadio qui se chargera de vous faire écouter des musiques en fonction du style que vous avez choisi.

Zamzar

Vous avez surement déjà eu des fichiers dans un certain format que vous vouliez convertir. Zamzar va pouvoir s’en occuper. C’est un outil de conversion, il prend donc un fichier d’un certain type en entrée pour le convertir dans un autre format. L’outil permet de convertir tout type de fichiers, des fichiers image (jpg, png, gif, tga ….), des documents (doc, docx, html, pdf, xls, ppt …), des musiques (mp3, ac3, mp4, wav, ra …), des vidéos (3gp, mov, avi, mpeg …) ou d’autres formats (7z, zip, tar, rar ….). Une fois la conversion effectuée vous recevez un mail avec un lien pour télécharger le fichier converti.

Informations et outils

PhoenixJP

PhoenixJP est un site qui référence via des flux RSS toutes les actualités du web. Celles ci sont classées par catégories (Générale, Hardware, tuning, Jeux, Mobile, OS, Sécurité ….). On a donc accès rapidement à l’ensemble des actualités sur une seule page. On peut choisir une catégorie, filtrer par date et même créer sa propre page personnalisée.

Dictionnaire / MédiaDico

Internet, MSN, Texto … ont tendance à nous faire oublier comment écrire correctement et sans faute d’orthographe. Je trouve ce dictionnaire très bien fait et surtout ce n’est pas qu’un dictionnaire classique. On y retrouve des définitions, synonymes, conjugaisons, style et traduction anglais/français et français/anglais.
Il existe même une extension pour firefox et Internet Explorer, permettant d’accèder directement aux fonctions du dictionnaire.

Cryptage des conversations MSN

Nicolas Frey — Tue, 01 Jul 2008 17:13:08 +0000

Vous discutez sur MSN ou avec une autre messagerie, vous avez peur que l’on récupère ou que l’on utilise vos conversations et données personnelles. Il existe des solutions pour sécuriser vos conversations.

MSN ou tout autre logiciel pour converser en ligne utilisent des protocoles non crypté. Ce qu’il veut dire que n’importe qui sur le réseau pourrait récupérer vos conversations. Certe ce n’est pas donné à n’importe qui, mais une personne qui s’y connait un peu y arrivera facilement.

Il existe néammoins des parades, plus ou moins efficaces et plus ou moins faciles à installer.

Personnellement après avoir fait le tour de ces sites, je me suis tourné vers SimpLite. Les autres me semblaient un peu bizarre à l’utilisation.
SimpLite est un logiciel qui fonctionne en standalone, il est gratuit et permet une utilisation sous MSN, ICQ/AIM, Yahoo ou Jabber. Il existe une version pro qui ajoute quelques fonctionnalités supplémentaires et la possibilité d’être multi-protocole (Une application par protocole pour la version free).
Simplite est simple d’utilisation, il détecte automatiquement si votre interlocuteur a installé le logiciel et procède à un échange de clef suite à l’acceptation des deux tiers. Une fois que les clefs ont été échangées la conversation sera cryptée à chaque fois que vous discuterez avec cette même personne. A condition bien sur que simpLite soit exécuté. Si toutefois vous discutez avec quelqu’un qui n’a pas installé le logiciel, il vous informera que la conversation est standard et vous pourrez discuter normalement. SimpLite est donc simple d’utilisation et une fois que vous aurez accepté les clefs de tous vos contacts il sera complètement transparent.

Voila, vous savez tout pour protéger votre vie privée.

Mais si vous êtes un vrai parano vous pouvez aussi protéger vos historiques de conversations MSN. Il vous suffira d’installer MSN Plus. Mais pensez à désactiver les historiques de LiveMessenger.

Firefox 3 – Après Browser Sync voici Weave

Nicolas Frey — Mon, 23 Jun 2008 09:52:36 +0000

La synchronisation de données entre navigateurs c’est possible et ce sans forcement passer par une clef USB. Browser Sync de Google le faisait très bien mais il n’est plus maintenu depuis 2006. Depuis la sortie de Firefox 3 il devient obsolète pour laisser la place à l’équipe de Mozilla est leur projet Weave.

Firefox 3 a fait sa sortie depuis quelques jours, il apporte quelques fonctionnalités visuelles sympatiques comme:

Une barre d’adresse refondue
Maintenant, un mot clé suffit pour retrouver une page déjà visitée. On peut donc retrouver facilement l’une de ses pages, sans avoir à passer par l’historique.
Des favoris et un historique améliorés
Ajout d’un clic l’url aux favoris, l’historique prends place avec les favoris, on retrouve aussi des dossiers dynamiques avec les sites les plus visités ….
Gestionnaire de download
L’interface a été modifiée et on peut désormais faire des pauses sur les téléchargements en cours pour les reprendre plus tard.
La sécurité
Le navigateur donne des indications précises sur les propriétaires des pages que vous visiter et vérifier les certificats de sécurité.

Certes tous ces changements sont très bien mais il reste de nombreuses extensions encore incompatibles. BrowserSync de google pour moi une extension obligatoire qui permet de synchroniser plusieurs navigateurs ensembles. On peut donc avoir des favoris, mots de passe, cookies, formulaires sur plusieurs pc sans avoir à tout ajouter à la main. Bien sur les données sont stockées sur un serveur distant mais cryptées et sécurisées.

Petit hic …. depuis firefox 3, BrowserSync ne fonctionne plus, forcement il n’est plus mis à jour depuis 2006, l’équipe de développeurs du projet a été transférée sur d’autres tâches.

Mais … merci à l’équipe de Mozilla qui est entrain de mettre en place dans un premier temps un produit équivalent mais qui a bien l’intention d’en faire un outil beaucoup plus complet. Son petit nom Weave.

Weave permettra de synchroniser l’ensemble de son profil (favoris, historiques, cookies, mots de passe, onglets, données de formulaires, extensions, themes, plugins de recherche ….), on devrait par la suite y retrouver la possibilité de partager ses marques pages, et avoir accès à nos données via un client web.

La version 0.1 est disponible en téléchargement mais elle est encore buggée et loin d’être achevée. Mais la version 0.2 ne devrait pas tarder à voir le jour avec pas mal de nouvelles fonctionnalités. J’espère que malgrè son status de béta, elle sera utilisable et fonctionnelle.

Les liens

Le projet Weave et son principe de fonctionnement

Le suivi de la version 0.2 de Weave

Les différents projets de Mozilla

Mozilla Weave 0.2 : la synchronisation des données de Firefox

Google browser sync pour firefox 2