Outweb

Auteur/autrice : arnaud Page 4 of 7

Système de tag d’images avec JQuery image annotate

de

On août 5, 2011

dans JQuery

Temps de lecture : < 1 minute

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

 <html>       <head>           <style type="text/css" media="all">@import "./css/annotation.css";</style>           <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>           <script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>           <script type="text/javascript" src="./js/jquery.annotate.js"></script>             <script language="javascript">                  $(window).load(function() {                     $("#toAnnotate").annotateImage({                       editable: true,                       useAjax: false,                       notes: [ { "top": 286,                                   "left": 161,                                   "width": 70,                                   "height": 70,                                   "text": "Edites moi !",                                   "editable": false },                                { "top": 134,                                   "left": 179,                                   "width": 100,                                  "height": 80,                                   "text": "Ne m'édites pas !",                                   "editable": true } ]                                       });                  });              </script>          </head>       <body>              <div class="main-content">               <img src="./monImage.png" id="toAnnotate" />           </div>          </body>   </html>

En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.

Faire un indexof travaillé avec H5AI

de

On août 4, 2011

dans Outils

Temps de lecture : < 1 minute

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.

Sécurité PHP

de

On août 2, 2011

dans Sécurité

Temps de lecture : 3 minutes

Les informations de cet article datent

L’actualité étant chargée niveau hack, il est temps de sortir un petit article présentant différentes méthodes de sécurisation d’une application PHP.
Je vais donc brièvement vous présenter différentes librairies ou classes PHP orientées sécurité.

  • PHPIDS
    Un monitoring complet des actions de l’utilisateur avec évaluation de la dangerosité de chaque requête, et de la session. L’outil indispensable pour détecter les recherches de failles.
  • Input filter
    Cette librairie permet de filtrer les tableaux $_GET, $_POST, $_REQUEST pour y detecter le PHP, JavaScript et HTML.
  • Anti csrf
    Permet d’ajouter un token dans ses formulaires afin de ne pas se les faire détourner. Le but étant que chaque formulaire ne soit soumis qu’une seule fois.

L’utilisation des librairies précédentes est un complément mais elles ne constituent pas une sécurité optimale à elles seules.

Voici donc une liste de bonnes pratiques niveau sécurité :

  • Ne jamais insérer des données dans une requête SQL sans un minimum de traitement. ( mysql_real_escape_string ou mieux PDO::prepare() et PDOStatment::bindValue() )
  • Ne jamais faire passer en paramètre une page à inclure
    exemple : include $_GET[« ma_page »]; préférez une solution du type : switch($_GET[« ma_page »]){ case « home » : include « home.php »; break; case « forum » : include « forum.php »; break; default : inclue « error.php » break; }
  • Avoir un fichier index.html dans chaque dossier du projet, contenant <html> <head></head> <body> <h1>Accés interdit</h1> </body> </html>
  • Sécuriser ses session_start contre le vol de session. $ip = !empty( $_SERVER[‘HTTP_X_FORWARDED_FOR’] ) ? $_SERVER[‘HTTP_X_FORWARDED_FOR’] : $_SERVER[‘REMOTE_ADDR’]; $securite = $ip.’_’.$_SERVER[‘HTTP_USER_AGENT’]; if(empty($_SESSION)) { session_start(); $_SESSION[‘securite’] = $securite; } elseif($_SESSION[‘securite’] != $securite) { session_regenerate_id(); $_SESSION = array(); } Voici donc une technique qui permet simplement de tester si une session est bien utilisée par le même navigateur sur la même machine.
  • Crypter les données sensibles de votre base (email,pseudo par exemple ).
    J’ai mis au point cette classe : Crypage.   Elle n’est certes pas extrêmement puissante mais elle permet de se protéger contre une injection SQL. Pensez bien sûr à changer la clef 😛 .
  • Le cryptage des mots de passe est une base de la sécurité. Pour cela utilisez une fonction comme celle-ci : protected function crypteMotPasse($mot){ $salt = « !123 GRAIN DE SEL# »; return sha1(strrev(ucfirst($mot).$salt)); } Ceci est une idée le but est d’éviter que les mots de passe soient facilement lisibles en cas de piratage de notre base de données. Tout en sachant que des rainbow table existent pour inverser un md5 ou un sha1.
    Vous pouvez aussi définir un salt par user. Pour cela, au moment de la création du compte, vous générez une chaîne de caractères le plus aléatoirement possible, que vous stockez dans votre table user. Pour la connexion de l’utilisateur, il faudra dans un premier temps aller chercher le salt dans la base. Puis utilisez la fonction ci-dessus comme suit : protected function crypteMotPasse($mot,$saltuser){ $salt = « !123 SALT FIXE# ».$saltuser; return sha1(strrev(ucfirst($mot).$salt)); } Comme le rappelle Simon dans son commentaire : En effet, l’attaquant, pour obtenir l’ensemble des données de la base doit :
    – avec la fonction crypteMotPasse (salt à l’intérieur de la fonction) : regénérer une rainbow table
    – avec une fonction qui prend un salt différent par utilisateur : regénérer autant de rainbow table que d’utilisateurs
  • Empêcher un accès direct à vos fichiers PHP. Dans votre/vos fichier(s) d’entrée(s) (index.php par exemple) faites un : define(« _BASE_URL »,TRUE); Puis commencez tous vos autres fichiers PHP par : <?php if(!defined(‘_BASE_URL’)) die(« Erreur, la page est indisponible »);
  • Ajoutez la ligne suivante dans votre/vos fichier(s) d’entrée(s) afin d’activer les logs d’erreur PHP. Ceci est très utile pour débugger votre application lors de la phase de développement. Il faut cepandant penser à enlever cette ligne au moment de la mise en production. <?php error_reporting(E_ALL); ?>
  • Ne stockez que le minimum vital dans les cookies (voire rien si possible), réduisez la durée de vie de vos cookies, et cryptez les données qui sont dedans.
  • Pour les utilisateurs de CodeIgniter, activez le stockage de la session en base de données.
    Documentation allez à « Saving Session Data to a Database »

Galerie de photos élégante

de

On août 2, 2011

dans Autre

Temps de lecture : < 1 minute

Vous êtes photographe, amateur ou professionnel et vous vous demandez comment mettre en valeur vos photos sur votre site web ?

3D Wall Gallery vous permet de les mettre en page sous forme d’un slider plutôt attractif.

Voici comment les images se présentent dans votre navigateur. La barre sur le dessus de la page vous permet de faire glisser la « pellicule » afin de voir d’autres images.

Sur le bas de la page, vous avez un widget qui vous permet de prévisualiser vos images et ainsi de choisir directement celle qui vous intéresse.

Vous l’aurez compris, ce projet basé sur JQuery UI est très intéressant, cependant, le seul bémol est la mise en place de cet outil.

En effet, pour ajouter une image il vous faudra :

  • Votre image en taille normale
  • Votre image en miniature
  • Ajouter votre grande image à la liste des images
  • Ajouter votre miniature à la liste des miniatures
  • Ajouter un lien pour afficher votre grande image à partir du widget

Il est bien dommage que le projet ne soit pas un fichier php qui listerait les images et qui générerait le fichier HTML automatiquement.

Cependant, la version téléchargeable contient un fichier index.html d’exemple, il vous suffira de remplacer les liens des images et de supprimer celles qui sont en trop.

Une aide au débogage javascript : blackbird

de

On juillet 30, 2011

dans Débogage

Temps de lecture : < 1 minute

BlackBird est une librairie Javascript qui permet de générer un système de log visuel.
Grâce à cet outil, plus besoin de faire des alertes toutes les 5 lignes de code pour trouver la source de vos bogues.
La librairie permet de chronométrer vos applications afin d’en trouver les parties lentes.

Voici les principales fonctions de la librairie :

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

// pour le profilage

log.profile( 'generate test string' );

var testContent = '';
for ( var i = 0; i < 3000; i++ ) {
  testContent += '-';
}

log.profile( 'generate test string' );

Et voici le résultat obtenu dans la petite fenêtre de débogage :

Bref il s’agit ici vraiment d’un outil ergonomique et simple destiné à simplifier la vie des développeurs. L’essayer c’est l’adopter !

Faire des popups non intrusives avec Fancybox

de

On juillet 30, 2011

dans JQuery

Temps de lecture : < 1 minute

Aujourd’hui, je vais vous présenter un plugin JQuery très connu mais qui est un des meilleurs dans son style. Fancybox permet de faire des popups non-intrusives avec un design à la MAC OS. Vous l’aurez compris, le design est épuré et sans couleur.
Du fait de sa simplicité apparente, on peut facilement l’intégrer sur nos sites Internet, elle ne choquera pas comme pourrait le faire lightbox avec ses bordures épaisses.

Je serai relativement court sur cette présentation, car la documentation est très fournie sur le site suivant Fancybox. Vous y trouverez aussi une suite d’exemples qui pourront vous convaincre d’utiliser ce plugin plutôt qu’un autre.

Comme je vous l’ai dit précédemment, on peut voir que les bordures sont très fines et que seul le bouton « fermer » ressort. Cependant, pour fermer la fancybox, vous pouvez aussi cliquer à côté.

Sortie de Symfony 2

de

On juillet 29, 2011

dans Framework

Temps de lecture : 2 minutes

La nouvelle mouture tant attendue de Symfony 2 est sortie hier matin en version stable. Après de nombreux mois de tests, de versions releases, beta et RC, la version stable et définitive est enfin accessible.

Au programme, énormément de changements et une simplification apparente du framework. Les bundles font leur apparition, ils vont vous permettre d’insérer dans votre site Internet des modules que vous pouvez télécharger avec composer. Il existe déjà un grand nombre de bundles tout faits et prêts à l’emploi, comme un forum ou une gestion des membres par exemple. Le but est réellement à court terme de fournir tous les codes de base pour un site Internet, afin de se focaliser seulement sur le coeur de votre application.

Bien que ceci soit une différence notable par rapport aux précédentes versions, la sortie de différentes versions du framework en fonction des utilisations et du niveau des développeurs est une chose encore plus étonnante de la part du framework PHP5, qui a la réputation d’être le plus complexe à apprendre. Pour le moment, seule la version standard est téléchargeable, mais la rumeur parle de version Standard Edition, Sandbox, CMF… Chacune présentera des caractéristiques de base différentes, mais en arrière-plan il s’agira toujours du même noyau Symfony 2.

Les habitués de Propel vont être bien déçus d’apprendre qu’il a disparu du framework. En effet, seul Doctrine, en l’occurrence Doctrine 2, est maintenant disponible. C’est la fin de la cohabitation :p. Le grand plus de Doctrine 2 est la mise en cache des résultats de requêtes. Ceci vous permet de gagner du temps sur la génération de vos pages web.

Dans les nouveautés notables, on peut mentionner l’intégration du moteur de templates twig. Twig est aujourd’hui un des meilleurs moteurs de templates PHP disponibles, son intégration n’est pas une grande surprise.

Présenter votre site Internet à vos utilisateurs

de

On juillet 28, 2011

dans JQuery

Temps de lecture : < 1 minute

Si votre site possède une partie un peu complexe, comme une zone membre avec des menus et des zones d’informations, vous souhaitez peut-être expliquer à vos utilisateurs la logique et le fonctionnement de tout cela. Habituellement, vous faites une vidéo ou un tutoriel expliquant à l’aide d’images votre projet.

Bootstro va vous permet de faire une suite d’infobulles, expliquant étape par étape, directement dans la page web, le fonctionnement de votre site. Ceci offre une multitude d’avantages. Le simple fait que l’utilisateur puisse à tout moment, sans quitter la page, accéder à l’aide, est déjà beaucoup.

Voici un exemple en images :

De plus on pourrais utiliser ce système sur des sites à contenu payant pour faire « un tour gratuit » ou bien encore pour présenter des templates HTML. Bref vous l’aurez compris, les utilisations de cet outils sont multiples.

Spriter

de

On juillet 27, 2011

dans Optimisation

Temps de lecture : 2 minutes

Pour faire suite à l’article sur l’optimisation, voici comment gagner du temps sur le chargement des images de vos pages web.

En général, les développeurs débutants, ou peu soucieux du temps de chargement de la page, utilisent un nombre conséquent d’images différentes. Chaque image est donc téléchargée une à une lors de l’affichage de la page web. Donc s’il y a 100 images sur la page il faudra 100 requêtes HTTP pour toutes les afficher.

Maintenant, il y a une solution alternative, le spriter, qui permet d’afficher les 100 images simultanément et en une seule requête. La page en question s’affiche donc très rapidement. Les grands sites Internet comme Google, Facebook, Amazon, … utilisent cette technique.

Voici par exemple le spriter de Google

outweb-spriter

La solution, c’est de réunir toutes les images en une seule grande et de n’afficher que la portion dont nous avons besoin grâce au css.

Voici un exemple simple de spriter

Source: https://www.pixelcrea.com/blog/sprites-css/

Nous allons utiliser cette image pour afficher seulement une icône à la fois.

Ici, je vous présente un exemple simple d’utilisation de spriter. Seulement les quatre icônes sélectionnées sont affichées, elles apparaissent toutes en même temps.

Différents sites Internet vous permettent de fusionner et de récupérer les coordonnées des icônes dans le spriter : Spritemapper , spritegen ou spritecow

Des tooltips élégants avec tipTip

de

On juillet 26, 2011

dans JQuery

Temps de lecture : < 1 minute

Quand vous souhaitez donner des informations à la volée, vous utilisez sûrement l’attribut title sur vos liens. Cependant, le rendu ne sera pas le même d’un navigateur à l’autre. De plus, les infos bulles basiques du navigateur ou du système d’exploitation sont rarement belles. Mais grâce au plugin JQuery tipTip vous allez pouvoir mettre en place des tooltips élégants. TipTip est fourni avec un CSS par défaut noir, mais libre à vous de le changer car il n’est pas très complexe.

Pour l’utiliser c’est très simple, pour le mot où vous souhaitez ajouter un tooltip il faut faire :

   <a class="tiptip" href="#" title="message tooltip">mot</a>

Et côté JavaScript, vous avez juste à faire appel au plugin sur votre classe tipTip :

    $(function(){
	$(".tiptip").tipTip();
    });

Voici un exemple en images, avec un contenu assez long dans la tooltip :

Page 4 of 7

Précédent

Suivant

Fièrement propulsé par WordPress & Thème par Anders Norén