Posts

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. ...

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. ...

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. ...

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. ...

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 : ...

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. ...

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. ...

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. ...

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. ...

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. ...