jeudi 31 décembre 2009

Protéger les images de son site web

Il n'y a rien de plus embêtant de ce faire piquer une image et de la retrouver sur un autre site web. C'est encore plus gênant lorsque la personne qui a subtiliser l'image ne prend même pas la peine de recopier l'image sur son propre serveur et fais un lien direct vers votre serveur. C'est ce que l'on appel le "hotlink".
Voici donc une petite astuce pour protéger les images de votre site web du hotlinking. Tout va se jouer au niveau du .htaccess et de la réécriture d'URL. Il vous suffit d'ajouter ces quelques lignes sous la ligne RewriteEngine On :

RewriteEngine On
#Protection des images
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?votre-domaine.fr/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?votre-domaine2.fr/.*$ [NC]
ReWriteRule .*\.(gif|png|jpe?g)$ - [F]
Dans cet exemple, seul les domaine "votre-domaine.fr" et "votre-domaine2.fr" peuvent afficher les images hébergé sur votre serveur. La régle ce lis ainsi :
pour tous domaines différents de "votre-domaine.fr" et "votre-domaine2.fr" les URI se terminant par .gif ou .png ou .jpg ou .jpeg recevront une erreur 403 ( c'est ce que signifie [F] Forbidden)
Maintenant on est pas obliger de renvoyer une erreur de type 403. Mais on peux par exemple renvoyer une images par défaut, ou pointer vers un script PHP qui ajoute un watermark sur l'image. Pour celà il suffit de modifier la dernière ligne par :

#redirection lien vers une images
ReWriteRule .*\.(gif|png|jpe?g)$ http://www.votre-domaine.fr/images/hotlink.png [R,NC]
#redirection lien vers une images
ReWriteRule (.*\.(gif|png|jpe?g))$ http://www.votre-domaine.fr/watermark.php?src=$1 [NC]
Voilà, je vous expliquerais une autre fois la manipulation des images en php pour ajouter le watermark. En attendant, Google est votre ami.

mercredi 30 décembre 2009

Transparence / Opacité en CSS

Avoir des éléments transparent sur un site peux être sympa. Notamment pour redonné un petit look web2.0 à ses popup. Mais la gestion de la transparence en CSS n'est pas gérer de la même manière dans tout les navigateurs. Certain me diront d'attendre l'arrivé de CSS 3.0, pour avoir accès à ses nouvelles propriétés. Mais moi je trouve dommage d'attendre alors que beaucoup de navigateurs modernes les supportent déjà.Voici donc un petit bout de code CSS pour faire de la transparence en HTML à l'aide des CSS:

 .monLayer{
opacity: 0.7; /* Modern Browsers */
-moz-opacity: 0.7; /* Netscape */
-khtml-opacity: 0.7; /* Safari 1 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
Je dois cependant vous mettre en garde. L'élément HTML ayant la class "monLayer" seras transparent, mais également tout les enfants de cet élément. A l'heure actuel je n'ai pas trouvé de solutions pour résoudre ce problème. Si ce n'est attendre le support des couleurs RGBa qu'apporteras CSS3.

vendredi 18 décembre 2009

Minifier le rendu HTML avec ZEND

Voici quelques bouts de code que j'implémente dans les développements que je réalise avec le Zend Framework. Le but de ce code est de supprimer tout ce qui est inutile dans le code HTML

  • Les commentaire
  • L'indentation
  • Les retours à la ligne
Certains diront que c'est inutile, que ça sert à rien. Bah je suis pas d'accord ! Cela permet de gagner quelques octets par page. Et donc d'accélérer un peu le chargement d'une page. Ce qui n'est pas négligeable par les temps qui court lorsque l'on développe un site à destination des plateformes Mobile (iPhone, Android, ...)
Donc le premier truc à faire est de créer un plugin de controller. Dont voici la source :

class My_Controller_Plugin_CompressHtml extends Zend_Controller_Plugin_Abstract
{
public function dispatchLoopShutdown()
{
$response = $this->getResponse();
$body = preg_replace('#(?:(?:(^|>[^<]*?)[\t\s\r\n]*)|(?:[\t\s\r\n]*(<|$)))#', '$1$2',$response->getBody());
$response->setBody($body);
}
}
Si vous débuter avec Zend il faut placer cette classe dans VOTRE_DOSSIER_PROJET/Librairy/My/Controller/Plugin/CompressHtml.php.

Je vais pas vous faire un cours sur les expressions régulières. Le seul truc à savoir c'est que ce plugin de controller est appeler tout à la fin du processus de distribution de la requête.

Une fois cette classe créer, il faut la déclarer. Pour celà il faut éditer le fichier VOTRE_DOSSIER_PROJET/application/Bootstrap.php et ajouter les quelques lignes de code suivantes :

class Bootstrap extends Zend_Application_Bootstrap_Bootstrap
{
protected function _initAutoload()
{
$autoloader = new Zend_Application_Module_Autoloader(array(
'namespace' => '',
'basePath' => APPLICATION_PATH,
));
Zend_Loader_Autoloader::getInstance()->registerNamespace('My_');
return $autoloader;
}

protected function _initFrontController()
{
$frontController = Zend_Controller_Front::getInstance();
$frontController->registerPlugin(new My_Controller_Plugin_CompressHtml());

return $frontController;
}

public function run()
{
$frontController = Zend_Controller_Front::getInstance();
$frontController->dispatch();
}

}
Pour ceux qui ce demande ce qu'est le Bootstrap.php ? C'est le fichier contenant la classe d'amorçage de votre application. Tout passe par ce fichier.
Voilà ! Normalement si vous avez bien suivit, tout le code HTML de vos pages seras minifié lors du rendu HTML. Alors bien sûr on peut encore améliorer. Par exemple en m'étant en cache le résultat obtenu mais ça sera l'objet d'un autre post.

jeudi 17 décembre 2009

Hightcharts : des graphiques interactif en javascript

hightchart graphique interactif javascriptHightCharts est une librairie Javascript gratuite permettant d'ajouter facilement des graphiques interactifs (histogramme, camembert, courbes, ...).

C'est une librairie en pure javascript qui ne nécessite pas de plugin du coté client (flash, JAVA, ...). Elle fonctionne sur tout les navigateurs modernes y compris Safari pour iPhone et Interner Explorer.
Voici un petit aperçu des graphiques réalisés avec cette librairie.

hightchart graphique interactif javascript
Allez voir le site officiel : Hightcharts graphique javascript intéractif

mercredi 16 décembre 2009

Google Goggles : la recherche visuelle


Fini les mots clé et les expressions clé. Il y a quelque jours Google la célèbre firme de View mountain à lancer une toute nouvelle application "Goggles". Pour le moment cette application est disponible sur Android l'os pour smartphone développé par Google. A mon avis elle va donner pas mal de fil a retordre à iPhone d'Apple. Je vous laisse découvrir cette magnifique appli au travers de cette petite vidéo :


Comme vous l'aurez sans doute compris, Google vient de s'offrir une super paire de lunette.

MooTools Forge : des plugins pour le framework javascript

Dans la communauté web, du développement, tout le monde à déjà entendu parlé du framework javascript JQuery et de ses plugins. Il existe de nombreux autres framework, dont un "Mootools" dont je parle pas assez souvent ici. Personnellement je trouve cette librairie js, excellente. Si vous entamé un développement, je vous conseille d'y jeté un coup d'œil.
Et pour vous aider, voici un petit lien vers une toute nouvelle forge pleine de plugin pour Mootools. Certes elle n'est pas très étoffé, mais elle a le mérite d'existé. De plus elle se rempli de jours en jours.