Mohammed CHERIFI » Tutoriaux http://www.mcherifi.org Another Web Developper Blog! Tue, 31 Jan 2012 18:42:15 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Comment mettre à jour ses extensions Firefox « périmées »? http://www.mcherifi.org/tutoriaux/comment-mettre-a-jour-ses-extensions-firefox-perimees.html http://www.mcherifi.org/tutoriaux/comment-mettre-a-jour-ses-extensions-firefox-perimees.html#comments Tue, 02 Feb 2010 12:20:43 +0000 Mohammed CHERIFI http://www.mcherifi.org/?p=549 Tweet

Photo by Foomandoonian sous Creative Common

Photo par foomandoonian

L’une des problématiques qu’on rencontre souvent sous Firefox c’est quand on installe la version la plus récente, on risque de perdre la moitié des extensions installées! pour la simple raison que ces extensions ne sont pas compatible avec la dernière version, et c’est souvent embêtant d’attendre que l’éditeur de l’extension la mets à jour pour que ça marche!

Dans ce tutorial, je vous montrerai une astuce que j’utilise très souvent pour faire marcher mes extensions « périmées » sur une nouvelle version de Firefox!

Comment ça marche?

Les extensions Firefox sont des fichiers qui portent le format .xpi, c’est enfaite juste un paquet .zip renommé en .xpi, si on le renomme et on le décompresse on trouve qu’il contient un bon nombre de fichiers, parmi ces dernier on trouve:

  • [DIR] chrome
  • [DIR] defaults
  • install.rdf (le fichier qui nous interesse)

Il se peut que vous trouvez d’autres fichiers/répertoires ça dépend de l’extension que vous avez téléchargé, pour cet exemple j’ai choisis TamperData, une de mes extensions indispensables! vous aurez donc à re-télécharger le .xpi de votre extension « périmée » depuis le site de son éditeur ou de mozdev.org puis continuant..

A quoi sert install.rdf?

Le fichier install.rdf permet de déterminer les informations concernant le plugin Firefox, ces informations sont représentées en XML sous forme de balises metadata et permettent de définir la version, auteur, versions compatibles, mise à jours etc.., et de tout ça ce qui nous importe est :

install.rdf

Vous l’avez bien compris! c’est le champ maxVersion qu’il faut modifier pour que votre extension marche sur la dernière version récemment sortie! Mettez le numéro de la dernière version ou même plus si ça vous chante, compresser à nouveau le répertoire en ext.zip et renomer le en .xpi, faite le glisser sur une fenêtre firefox, et hop ça marche!

L’avantage de cette astuce c’est que ça vous éviderai de croiser les mains pendant une demi journée (voir plus) à attendre que l’éditeur d’une extension met à jour son install.rdf, (c’est vous qui le fait à sa place :P)

Partager cet article: Twitter Facebook Google Bookmarks del.icio.us Netvibes viadeo FR Digg LinkedIn Slashdot Sphinn Mixx Blogplay Identi.ca Print Ping.fm email Posterous Reddit Yahoo! Buzz PDF RSS Diigo Fark Blogosphere News blogtercimlap

]]> http://www.mcherifi.org/tutoriaux/comment-mettre-a-jour-ses-extensions-firefox-perimees.html/feed 0 Enchainer plusieurs animations avec jQuery http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html#comments Wed, 23 Sep 2009 23:08:07 +0000 Mohammed CHERIFI http://www.mcherifi.org/?p=176 Tweet

Bonjour à tous!

Savez vous qu’avec jQuery il est possible d’enchainer plusieurs animations à la fois dans une seule instruction? alors la réponse est OUI, on peut même aller plus loin avec un peu d’imagination et c’est vraiment très facile à mettre en œuvre! En fait chaque méthode dans jQuery retourne l’objet lui-même, ainsi on peut enchaîner à une autre méthode :

Exemple :

<script type="text/javascript">// <![CDATA[
jQuery(window).ready(function(){
$('#testcode1').click(function(){
$('#mondiv').animate({width:'200px', fontSize: "18px", borderWidth:'3px', marginLeft:'100px', opacity:'0.8', padding:'10px'},2000)
.animate({width:'120px', marginLeft:'0', fontSize: "12px", borderWidth:0, opacity:'1', padding:'0'},2000);
return false;
});
});
// ]]></script>
<a id="testcode1">Tester le code</a>
<div id="mondiv" style="border: 1px solid #ffffff; background: #077f2e none repeat scroll 0% 0%; width: 120px; height: 120px;">Un div de test</div>


Resultat
Tester le code

Un div de test

La fonction animate() est une fonction native en jQuery, elle permet d’animer les propriétés CSS d’un objet jQuery dans une durée bien déterminée , la syntaxe comme dans l’exemple si-dessus est très simple!

On peut animer une seule, ou plusieurs propriétés CSS à la fois! Par exemple pour animer la largeur d’un div ayant l’id test et la mettre à 300px sur 2secondes le code sera :

$('#test').animate({width':'300px'},2000);

Ainsi on peut enchainer autant qu’on veux, le reste dépend de votre imagination ^^, à noter que la durée de l’animation (2000) est en millisecondes, d’où 1 seconde = 1000 ms

Un autre Exemple d’enchainement d’animation

Dans cette exemple, on va animer un div ayant un arrière plan rouge, et une image d’étoile pour construire le drapeau du maroc à la fin de l’animation

Voir le resultat

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- 	www.mcherifi.org -->
	jQuery(window).ready(function(){
		$('#animationlink').click(function(){
			$('#mondiv').animate({left:'400px', opacity:'0.3', width:'40px', height:'70px', borderWidth:'20px'}, 1500)
				.animate({top:'300px', opacity:'0.8', left:'100px', width:'70px', height:'70px', borderWidth:'7px'}, 1500)
				.animate({top:'160px', opacity:'0.4', left:'500px', width:'170px', borderWidth:'3px'}, 1200)
				.animate({top:0,  opacity:'0.2',  left:0, width:'200px', height:'200px', borderWidth:'1px'}, 700)
				.animate({opacity:'1', borderWidth:'2px'}, 1000);

			$('#monetoile').css('opacity', 0).animate({left:'500px', top:'400px', opacity:'0.5', height:'80px', width:'100px'}, 1300)
				.animate({left:'260px', top:'250px', opacity:'0.8'}, 1000)
				.animate({left:'100px', width:'0', opacity:'0.2'}, 1200)
				.animate({width:'154px', top:'100px', left:'150px', opacity:'0.5'}, 1000)
				.animate({left:'30px', height:'135px', width:'154px', top:'30px', opacity:'1'}, 1200);

			return false;
		});
	});

</script>
<title>Mohammed CHERIFI - Enchainement d'une animation sous jQUery</title>
<style type="text/css">	

	#contenaire{
		position:relative;
		margin:10px;
	}

	#mondiv{
		background:#f00;
		width:150px;
		height:150px;
		border:1px solid #077F2E;
		position:absolute;
	}

	#monetoile{
		position:absolute;
		display:none;
	}

</style>
</head>
<body>

	<a href="#" id="animationlink">Animaer</a><br />

	<div id="contenaire">
		<div id="mondiv"></div>
		<img id="monetoile" src="star.gif" alt="I Love Morocco" width="154" height="135"/>
	</div>

</body>
</html>

Télécharger le code source de l’amination

Partager cet article: Twitter Facebook Google Bookmarks del.icio.us Netvibes viadeo FR Digg LinkedIn Slashdot Sphinn Mixx Blogplay Identi.ca Print Ping.fm email Posterous Reddit Yahoo! Buzz PDF RSS Diigo Fark Blogosphere News blogtercimlap

]]> http://www.mcherifi.org/tutoriaux/enchainer-plusieurs-animations-avec-jquery.html/feed 6 Comment contourner un .htaccess? http://www.mcherifi.org/tutoriaux/comment-contourner-un-htaccess.html http://www.mcherifi.org/tutoriaux/comment-contourner-un-htaccess.html#comments Sun, 05 Jul 2009 14:24:32 +0000 Mohammed CHERIFI http://localhost/?p=8 Tweet

L’objectif de ce tutorial est d’expliquer une faille qui a été découverte dans les .htaccess, cette faille qui affecte un nombre importants de sites qui utilisent les fichiers .htaccess comme solution afin de restreindre l’accès à certains fichiers sensibles!

Apache c’est quoi?

Apache HTTP Server, souvent appelé Apache, est un logiciel de serveur HTTP produit par l’Apache Software Foundation. il permet tout simplement d’héberger un site web, il peut évidement tourner sur plusieurs plateformes, sur un total de 182 millions de sites, Apache est utilisé pour 91,5 millions, contre 62,8 millions pour Microsoft IIS.

Un .htaccess à quoi ça sert?

un .htacces est un fichier interprété par le serveur apache qui agit sur le répertoire dans-lequel il se trouve, il est généralement utilisé pour protéger l’accès à un répertoire ou un fichier par un mot de passe, définir les pages d’erreurs personnalisées, gérer la réécriture d’url, définir les mime-type et encore plus…, mais ce qui nous intéresse le plus dans ce tutoriel, c’est restriction d’accès à un répertoire ou un fichier.

Problème :

Parmi les utilités d’un .htaccess, il existe la directive LIMIT qui permet de restreindre l’accès à certains parties sur un site web, en effet cette protection peut facilement être contournée si elle n’est pas correctement mise en place

Exemple :

On considère que nous avons un serveur web local et qu’on veut restreindre l’accès au répertoire /sercret/ , on y met un .htaccess contenant le code suivant :

AuthUserFile /repertoire/de/votre/fichier/.htpasswd
AuthName "Accès protégé"
Require valid-user
AuthType Basic

Ce fichier permet d’indiquer à Apache de refuser toute requête GET ou POST si l’utilisateur n’est pas identifié avec un login et un mot de passe apparaissant dans le fichier .htpasswd

Pour accéder à ce dossier, nous appelons l’url http://localhost/secret/ via un navigateur web .
La requête envoyée ressemblera à :

GET /secret HTTP/1.1
Host: localhost
Connection: close

on aura le prompt qui nous demandera les identifiant pour accéder au dossier, jusque là tout est normale, le serveur apache ne fait qu’interpréter la requête qu’on lui demande.

maintenant imaginons qu’on envoie une requête différente de GET et POST

Exemple :

AuthUserFile /repertoire/de/votre/fichier/.htpasswd
AuthName "Accès protégé"
Require valid-user
AuthType Basic
Deny from all

Dans ce cas Apache interprétera la requête et n’affichera aucune erreur, bien qu’on a pas utilisé GET ou POST qui sont restreint grâce à la directive LIMIT, apache agira gentiment et nous affichera le contenu du répertoire /secret/ ;)

Logiquement apache est censé interdire l’accès à tout ficher dans le répertoire concerné, le soucis c’est que cette protection est appliqué seulement si le navigateur appelle la page via GET ou POST, par defaut nos navigateurs appellent implicitement les page avec des recettes GET, pour contourner cette protection, il suffit de se servir d’un outil comme NetCat ou bien LiveHttpHeaders (Extension Firefox) on modifiant le GET par n’importe koi et vous hop vous aurez le contenu de la page qui s’affichera :)

Comment se protéger ?

c’est assez simple, n’utilisez pas la directive LIMIT dans vos .htaccess pour restreindre l’accès à vos fichiers sensibles, virez les lignes <Limit> … </Limit> de tous vos fichiers .htaccess, ça vous évitera ce genre de problèmes

Partager cet article: Twitter Facebook Google Bookmarks del.icio.us Netvibes viadeo FR Digg LinkedIn Slashdot Sphinn Mixx Blogplay Identi.ca Print Ping.fm email Posterous Reddit Yahoo! Buzz PDF RSS Diigo Fark Blogosphere News blogtercimlap

]]> http://www.mcherifi.org/tutoriaux/comment-contourner-un-htaccess.html/feed 5