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.

mercredi 1 juillet 2009

Jumpcut : Un gestionnaire de presse-papier pour Mac OX X

jumpcut-gestionnaire-copier-coller-presse-papier-mac-osxVoici un petit utilitaire très sympathique pour les accros du copier-coller.

Pour ceux qui se demande à quoi ça peut bien servir un gestionnaire de presse-papier, hé bah ! ça permet de de faire plusieurs copier, et au moment de faire un coller, vous pouvez choisir entre les différents textes que vous avez précédemment copier.
N'ayez crainte, ce petit utilitaire ne vient en rien modifier les fonctionnalités de Mac OS X. Il vient en complément. Vous pourrez toujours faire vos copier-coller en faisant (  + C et  + V ) .
Si vous souhaitez accèder à l'historique du presse-papier il vous suffit de faire ( ctrl + alt + V ). Puis tout en maintenant ctrl + alt enfoncé, vous pouvez revenir dans l'historique en utilisant les flèche du directionnelle gauche ou droite.
Bref ce petit logiciel vient combler une lacune d'OS X, en complétant la fonction du copier-coller.


jumpcut-gestionnaire-copier-coller-presse-papier-mac-osxAllez également voir :

mardi 30 juin 2009

Touche pour developpeur sur mac os x

mac-os-x-touche-developper-programmationDepuis quelques temps, j'ai des collègues qui essaye de switcher sur mac. Seulement ils ne trouvent certaines touches du clavier très employé pour la programmation et le développement.

Alors voici un petit coups de main pour tout ce qui sont dans le même cas qu'eux.
Il ne faut pas perdre de vue que mac c'est facile. Tout est visuelle ou se fais par drag and drop.
voici quelques raccourcis :
  • accolade ouvrante "{" : alt + (
  • accolade fermante "}" : alt + )
  • crochet ouvrant "[" : alt + shift + (
  • crochet fermant "]" : alt + shift + )
  • pipe "|" : alt + shift +L
Voilà ! ça peut sembler un peu compliquer aux premiers abords, mais ça vient tout seul par la suite.

vendredi 26 juin 2009

Voici comment faire une capture écran sur mac os X

capture-copie-ecran-touche-macTout d'abord bienvenu à toi ! Car je suppose que si tu lis ce post c'est que tu essaye de te perfectionner sous mac OS X. Donc je vais te donner un petit coup de main et t'expliquer comment faire une capture ou une copie écran sur mac.

Tout d'abord, sache qu'il n'y a pas de touche [impr écran] sur le clavier mac. Tout va se faire avec les touches :
  • [cmd] commande (ou pomme pour les nostalgique )
  • [ctrl] contrôle
  • [shift] ou la petite flèche vers le haut
  • [3] le " sur le clavier français
  • [4] le ' sur le clavier français
  • [espace] la grande barre tout en bas.
J'ai coloré les touches sur la capture qui illustre ce post. Maintenant que tu as repéré ces touches, on va pouvoir passer aux choses sérieuses. Il existe deux façons de faire :
  • la capture écran
  • la copie écran
La capture écran va faire une copie de l'écran et générer un fichier images sur le bureau. Tandis que la copie écran va copier l'écran et stocker cette copie temporairement dans la presse-papier. Pour avoir ensuite l'image il faudra ouvrir un logiciel genre textEdit, openOffice ... et faire "coller"(Pomme+V).

Pour faire une capture écran, on peut faire :
  • commande + shift + 3 : pour capturer tout l'écran
  • commande + shift + 4 : pour faire apparaître un curseur et capturer juste une portion de l'écran
  • commande + shift + 4 et espace : pour capturer une fenêtre, un menu ou une icône du bureau
Pour faire une copie écran, on peut faire :
  • contrôle + commande + shift + 3 : pour capturer tout l'écran
  • contrôle + commande + shift + 4 : pour faire apparaître un curseur et capturer juste une portion de l'écran
  • contrôle + commande + shift + 4 et espace : pour capturer une fenêtre, un menu ou une icône du bureau
Voilà ! Normalement tu es capable de faire une copie écran sur mac.

jeudi 25 juin 2009

HTC Hero, iPhone killer ?


Voici un nouveau smartphone qui promet de donner du fil à retordre au fabuleux iPhone de monsieur Steve Jobs (paix à son foie :P). Je ne sais pas trop ce qu'il vaut, mais il commence à faire du buzz sur le net. Et au regard de la petite vidéo ci-dessous, je dirais qu'il y a de quoi !







De ce que j'ai pus comprendre l'HTC Hero est basé sur Androïd, le désormais célèbre OS pour mobile de Google. Mais ce qui innove sur ce téléphone c'est son interface graphique nommé Sense (j'ai hâte de la testé !). Pour les détenteurs du G1/HTC Dream ou du HTC Magic, HTC à laisser entendre que l'interface serais disponible. Donc bonne nouvelle.

Côté hardware, ce smartphone serais équipé du wifi b/g et du bluetooth 2, d'un appareil 5 MegaPixels sans flash :'(. Question autonomie on parle de 7 heures en communication et jusqu'à 750 en veille. Et chose étonnante, il possède un accéléromètre et une boussole magnétique. Ca me rappelle un autre smartphone !

//EDIT : Donc contrairement à ce que je disais, l'interface Sense, ne seras pas disponible sur le HTC Dream et sur le Magic. Mais je suis sur qu'il y a bien quelque Geek qui vont réussir à nous porté ça dessus.

lundi 22 juin 2009

Boutons et icônes design pour vos sites web

bouton-iconeVoici quelques sites ou vous pourrez trouver des boutons et des icônes gratuit pour vos site web.

Bonne continuation dans vos projets.

dimanche 21 juin 2009

Les Framework CSS

Salut à tous. En faisant un peu de veille techno ce week-end, je suis tombé sur un article parlant des Frameworks CSS. Je suis tombé des nus. Depuis le temps que je fais du web, pour moi un framework s'appliquai à un langage de programmation. J'ai lu l'article en question, et j'avoue que l'idée est séduisante.

Un Framework CSS est tout bonnement un rassemblement de conventions, de librairies et de bonnes pratiques servant à la mise en place d'un projet Web (vous me direz comme n'importe quel framework, sinon ça n'as pas de sens).
En gros ce que fais un Framework CSS gère :
  • le reset des styles par défault des navigateurs. C'est à dire obtenir le même rendu sur les navigateurs (récents)
  • les règles de typographie et le rythme vertical
  • le positionnement des élément avec un "grid layout"
  • l'apparence des formulaires
  • le résultat à l'impression
J'ai trouver 3 Frameworks intéressant, YAML (et voici le site de démo), blueprint, Yahoo UI Librairy. Voici une petite capture de la démo de YAML.
YAML-Framework-CSS
Bref, maintenant que je connais ça je me prendrais moins la tête pour faire mes maquettes HTML.

lundi 15 juin 2009

Trouver un logiciel équivalent grâce à AlternativeTo.net

logiciel-alternatif-equivalentVoici un site qui est au gôut du jour ! En pleine crise économique, AlternativeTo.net vous permet de trouver un logiciel équivalent à un autre. (Et souvent en freeware).
Bref un petit site bien utile, qui vous propose des logiciels aussi bien sur Mac, Linux ou Windows.
Vous n'avez donc plus de raison de refuser de switcher sur un Linux ou sur un Mac.

mardi 9 juin 2009

Verifico - vérifier les avis des internautes

verifico-recherche-analyse-avis-consommateursVoici un nouveau service web prometteur. On connaissait les sites d'avis de consommateurs qui vous propose des classements dans tous les sens. On connaissait les agrégateurs d'avis et guide d'achat. Maintenant il y a Verifico.
Comment vous expliquez ça ?
Verifico est fait pour les personnes qui cherchent à connaître l'avis des internautes sur un produit donné. C'est une sorte de moteur de recherche, un peu plus évolué. En effet, en plus de vous afficher des avis pertinents, Verifico analyse ces avis et vous fais une mini synthèse des points forts et des points faibles du produit. Voici ce que donne une recherche sur mon ordinateur portable : le Lenovo X300.
Certes, vous me direz qu'il n'y a pas beaucoup d'avis, qu'il n'y a que des ordinateur portable. Je vous réponds : bien sûr, mais le service vient de ce lancer. Il faut lui laisser le temps de s'épanouir. Hé puis il est encore en Beta test.

Bref, l'idée est très bonne. Le site est très clair sans superflu. En un coup d'œil on peut juger le produit recherché. Je vous conseille de le tester et de nous faire part de vos avis. Voici le lien : Verifico - Recherche et analyse d'avis de consommateurs

mardi 26 mai 2009

Gantter, un microsoft projet en ligne

Après avoir chercher en vain une alternative gratuite et libre de Microsoft project, je suis tombé sur ce post qui présentait un outil de gestion de projet en ligne totalement gratuit. Et après l'avoir un peu tourné dans tout les sens, je dois dire que je suis ravie de ce petit outil.

Cet outil rassemble les fonctions essentielles pour gérer les ressources, gérer les tâches et les calendriers. Pour les parano de la confidentialité ne vous en faite pas. Gantter ne stocke aucune informations sur ses serveurs. Lorsque vous avez terminer votre Gant, il vous propose de le télécharger sur votre disque dur. Vous pourrez ainsi le rééditer plus tard.

jeudi 23 avril 2009

J'organise mon anniversaire avec YouBridge et ma famille

cadeaux-anniversaire-youbridge-famille-proche-organiser-evenementSalut à tous, je ne suis pas trop présent c'est dernier temps et je m'en excuse. Je sais vous allez me dire un truc du genre : " Oh l'autre ! il donne jamais de nouvelles sauf à l'approche de son anniversaire ".

Hé bah, Oui ! Je tiens à vous rappelez que mon anniversaire est à la fin du mois. Très exactement le 29 Avril (Si vous pouviez en toucher deux mots à mon Boss pour qu'il m'accorde un peu de vacances : lol )
Enfin ! Je ne reviens pas vous voir les mains vide. J'apporte avec moi un cadeau. Dans le peu de temps libre que j'ai pour m'organiser une petit fête de famille pour mon anniv, j'ai découvert un site apparemment récent : YouBridge.com : Le site pour la famille et les proches.
Pour la petite histoire, la première fois j'ai passé mon chemin. J'ai cru avoir affaire à un Nième FaceBook et puis le design ne m'avais pas fais très bonne impression. Mais quelques temps après, je suis repasser dessus. Et j'peux vous dire que le site avait bien changer. Et cela m'a donner envie de m'inscrire pour voir. (ils ont l'air dynamique les p'tits gars qui font ce site)

organiser-evenement-cadeaux-anniversaire-youbridge-famille-proche

Bien entendu le site est un réseau social (type FaceBook). Mais orienter sur la famille et les proches intimes. On y trouve les fonctionnalités basic de tout site de social. Mais ce qui m'as attiré c'est un ou deux petits trucs qui pouvaient me simplifier la vie pour organiser mon anniversaire.

Parmi les fonctionnalités intéressantes on trouve :
  • l'organisation d'événement avec notre famille et nos proches.
  • l'organisation de cadeaux collectifs pour une personne.
  • Gestion d'idée de cadeaux (pour soi ou pour un contact de notre carnet)
Bref un petit site à surveiller. Car il y a quelques idées qui semblent prometteuses. Et c'est pas les occasions qui manque pour organiser un événement (mon anniversaire, fête des mères, fêtes des papa, ... , et noël, et mon anniversaire le 29, ...)

Ah oui dans mon délire j'oubliais un truc sympa, mais qui va de soi sur ce genre de site. Il y a un calendrier (mensuel / annuel) qui vous résume les dates d'anniversaires et événements auxquels vous participez. En plus il vous dis c'est la fête de qui ce jour là.

Bref pour conclure, allez vite vous inscrire sur YouBridge.com pour consulter ma liste de cadeaux. Comme ça vous serez sûr de me faire plaisir.

Allez, au 29 avril, avec plein de cadeaux :D

mercredi 25 mars 2009

Black-Out contre Hadopi pour agir contre la censure du net

A travers ce post, j'ai décidé de me joindre aux nombreux sites qui ont répondu à l'appel de la Quadrature, face au projet de loi Hadopi qui prévois de déconnecter de la toile des familles entières sans réelles preuves ni procès.


HADOPI - Le Net en France : black-out

Aussi je vous invite vous lecteurs de mon blog à aller voir sur le site de la Quadrature pour lire le dossier sur la loi Hadopi. Et si le coeur vous en dis joignez vous à notre mouvement.

dimanche 15 mars 2009

HTC Magic (G2), le premier vrai concurrent de l'iPhone

Bonjour à tous,

je ne pouvais pas reprendre ce blog sans vous parler du mobile Buzz du moment le dénommer HTC Magic.

D'un design plus séduisant et plus élégant que son prédecesseur le HTC Dream (ou G1) , il est rapide au toucher. Contrairement au G1, il ne possède pas de clavier ni de stylet. Tout ce fais au doigt comme sur l'iPhone.
Ce nouveau téléphone portable a été entièrement conçu pour être connecter à internet le plus souvent possible. Aussi il possède une grande autonomie (environ sept heure) , et toute les derniers types de connectivité.
Côté multimédia, il n'a rien a envié à l'iPhone. En effet le G2 (ou HTC Magic) supporte en natif un grand nombre de format audio et vidéo.
Bon, je suis un peu en retard sur ce buzz. Donc je vais pas paraphraser les autres blog qui en parle sûrement mieux que moi. Je vous laisse cette petite vidéo pour vous montrer ce petit bijoux :



Et voici juste quelques points technique :
  • écran TFT LCD tactile (touch-sensitive) de 3,2″ (HVGA 320×480)
  • connectivité Bluetooth, 3G/3G+, Wifi (b/g)
  • GPS intégré
  • appareil photo numérique 3,2 méga pixel
  • 512 Mo de mémoire interne extensible par micro SD
  • 192 Mo de mémoire vive (RAM+)
  • format supporté : ACC, ACC+, MP3, WMA, WAV, OGG, MP4, 3GP

jeudi 12 mars 2009

Mille excuses !

Je m'excuse auprès des personnes qui commençait a lire mon blog régulièrement.
Je n'ai pus le maintenir à jour ces derniers temps à cause d'une petite choses rose qui m'ai tombé dessus un beau matin vers 9h36 un 25 septembre.

Bon c'est pas une bonne excuse, mais c'est que ça occupe beaucoup de temps mine de rien.

Mais je vais me remprendre en main.

Allez bonne journée.