IxEdit: générateur d’animations interactives
IxEdit est le premier outil permettant de créer des animations interactives en JavaScript : au lieu de mettre la main dans le cambouis, il suffira de remplir des formulaires avec l’effet souhaité. C’est un véritable outil pour les designers qui pourront créer et gérer les animations en quelques clics, dans leur environnement, c’est-à-dire dans leur site Web ou blog.
Faire un StoryBoard web avec Balsamiq Mockups
Je viens de découvrir aujourd'hui un site très sympa qui propose une appli web permettant de créer vos "story board web".
Cette appli est disponible gratuitement online, ou il existe aussi une version desktop (adobe air) pour 79$.
http://www.balsamiq.com/
Pratiquement tous les types de fenêtres, containers, boutons... sont disponible et utilisables pas un simple drag'n'drop.
Le rendu "façon dessin" est très sympa je trouve (L'exemple ci-dessus à été fait en moins de 1 min)
CACTI : Superviser un serveur (graph)
Bonjour (et bonne année),
Au menu aujourd'hui, un petit article sur la supervision d'un serveur dédié (graphiques de CPU, Mémoire, Traffic, Process...) avec CACTI.
NB: CACTI est un soft en PHP et nécessite donc un serveur web installé et configuré avec PHP/Mysql).
Je m'y suis attaché il y a quelques jours sur un serveur Kimsufi d'OVH.
Avant tout, il faut savoir que certain hébergeur (OVH en l'occurrence) installent des patchs sur les noyaux linux.
Verifier donc d'abord la version de votre noyau en lançant un "uname -a" ce qui devrait vous donner un truc du genre "2.6.27.10-grsec-xxxx-grs-ipv4-64".
Si vous voyez "grsec" ... c'est que le patch de sécurité "grSecurity" est installé sur votre noyau... et que certains graphs ne fonctionneront pas normalement (impossible de grapher le trafic réseau et nombre de processus incorrect).
Donc avant tout, faites en sorte de booter sur un noyau sans "grsec" (chez OVH vous pouvez simplement utiliser le netboot sur un noyau sans ce patch).
Vous pouvez maintenant vous lancer en installant CACTI ("apt-get install php5-cli php5-mysql php5-snmp snmp snmpd rrdtool cacti" ou en suivant ce guide).
NB : Reférez vous ensuite à cette page pour configurer correctement l'agent SNMP et CACTI lui même.
Une fois tout cela fait, attendez une dizaine de minutes et vous pourrez commencer à voir vos graphs.
Exemple:
Zen Coding, comment gagner du temps
<div id="container">...<a href="#">...</a><strong>...</strong></div><span>...</span>... etc
Tout développeur de site web s'est déjà forcement arraché les cheveux sur une page HTML constituée d'une suite interminable de balises <XXX>...</XXX> plus ou moins enchevêtrées et en s'efforçant de bien indenter leur code pour ne pas oublier une foutue balise fermante...
Bref, c'est long, chiant et pas très intéressant... mais il faut le faire !
Heureusement, il existe une façon pour un peu moins se prendre la tête (je ne vous parle pas des outils comme Dreamweaver ou autres... que je n'affectionnent pas particulièrement) non !
Je vous parle là simplement d'une autre façon de coder dans votre éditeur préféré : Le Zen Coding !
Ce code par exemple :
<div id="content">
<h1></h1>
<p></p>
</div>
Pourra s'écrire :
div#content>h1+p (un div d'id "content" contenant un h1 et un p)
Il vous suffit simplement d'ajouter l'extention à votre édteur (si elle est dispo... au pire c'est pas trés compliqué à coder) et c'est parti.
Plus d'infos sur ce site.
Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.
Compliez et Partagez vos codes sources, en ligne !
Après le célèbre pastebin.com qui permet de partager un code source rapidement, un nouveau site vient de voir le jour : ideone.com
Ce dernier vous permet comme son compère, de partager votre code, mais aussi (et surtout) de le compiler en ligne !
Les langages supportés sont nombreux : Assembler, Bash, Brainfuck, C, C++, D (dmd), Haskell, Icon, Java, Lua, Nice, Ocaml, Pascal, Perl, PHP, Pike, Python, Ruby, Vala.
Un petit exemple de "brainfuck" 
>++++++++++
[>++++++++>++++++++++>+++++++++++>++++++++++++>++++++++++++>+++>++++++++++>++++++++++>++++++++++>+++++++++++>++++++++++++>+++>+++++++++++>++++++++++>++++++++++>++++++++++++>++++++++++>++++++++++++>+++++++++++>++++++++++++>+++>++++++++++>++++++++++>+++>++++++++++++>++++++++++>++++++++++>+++++++++++>++++++++++++>+++++++++++>++++++++++++>++++++++++>+++++>++++++++++>+++++++++++>+++>+++><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<-]
>+++>--->-->--->---->++>->++++>+>++++>----->++>-->+>->---->+>--->++++>----->++>>+>++>->+>-->+++>--->+>---->+>---->++>++++>++>+++>
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.>.
Microsoft SuperPreview
Microsoft vient de lancer ces derniers jours un nouvel outil (gratuit) permettant de comparer un site web sur Internet Explorer version 6, 7 et 8 !
A la différence de IEtester ou MultipleIE, celui-ci est censé afficher le site exactement comme s'il l'était dans la version choisie.
Seul Internet Explorer est supporté pour le moment, mais Firefox et Safari seront ajoutés.
Il devrait être possible d'accéder à des navigateurs par le réseau pour tester d'autres plate-formes (par exemple Mac).
Il est possible de comparer deux versions cote à cote ou même par transparence !
Microsoft SuperPreview est disponible en téléchargement ici.
Edit: Pour le moment il semblerait qu'on ne puisse pas vraiment naviguer via les liens (c'est pas comme si c'était une fonctionnalité primordiale sur un site web ) du coup ça devient un peu lourd de devoir saisir chaque URL une par une ! Le but est donc UNIQUEMENT de comparer l'affichage sur les différentes versions d'IE.
Alias Gmail : savoir reconnaitre les spammeurs
Aujourd'hui au menu : les alias Gmail.
Si comme beaucoup votre boite mail est sur gmail (sinon commencez à y réfléchir... c'est vraiment la meilleure !) il faut savoir que vous avez une infinité d'alias (un autre mail qui pointe dans la même boite).
En effet, lorsque vous vous inscrivez sur un site, on vous demande dans 99% des cas votre mail.
Seulement parfois ces sites collectent et revendent ces adresses mail et vous devenez très vite la cible de spammeurs.
L'astuce que je vous présente ici consiste à utiliser le système d'alias de Gmail pour connaitre le site qui a revendu votre email (ou sur lequel le spammeur à trouvé votre adresse).
Voici l'astuce :
Lorsque vous saisissez votre adresse mail sur un site, il suffit d'ajouter le signe "+" après votre adresse, suivi de n'importe quoi (email+N_IMPORTE_QUOI@gmail.com)
Qui donnerait par exemple si votre mail est "jean@gmail.com" : jean+facebook@gmail.com
Vous recevrez donc tous les mails comme si vous aviez saisi votre adresse mail classique mais vous pourrez (en le suffixant par +nom_du_site) connaitre l'origine du mail (si vous recevez plus tard du spam envoyé à "jean+facebook@gmail.com", vous saurez donc tout de suite d'où ça vient !
NB: En utilisant cette astuce, vous pourrez aussi plus facilement créer des filtres/libellés selon la provenance des mails que vous recevrez.
Générateur de sprites
Qu'est-ce qu'un sprite ?
Un sprite est une image qui en contient plusieurs.
Comme un exemple vaux mieux qu'un long discours, voila une exemple de sprite :
et un autre
Le premier, comme vous l'aurez remarqué viens de google. C'est en fait l'une des seules images du site !
A quoi ça sert ?
L'intérêt principal des sprites est de minimiser les temps de chargement et d'affichage sur les pages d'un site.
En effet, l'image chargée par le navigateur puis mise en cache peut être utilisée n'importe où dans la page sans qu'il y ai besoin d'en télécharger une nouvelle.
Là où l'effet se fait le plus ressentir est sur les "rollover" (les boutons qui changent d'aspect au survol de la souris, voir 2eme exemple) car l'image qui remplace la première au survol de souris est déjà chargée ! (donc plus besoin de pré-charger les images des rollover comme nous le faisions il y a quelques années en javascript).
Comment ça fonctionne ?
C'est là qu'intervient le CSS.
a.lang {
padding-right: 20px ;
background-repeat: no-repeat ;
background-image: url(drapeaux.png) ;
}
a.lang.fr { background-position: 0px 0px }
a.lang.de { background-position: -20px 0px }
a.lang.it { background-position: -40px 0px }
a.lang.es { background-position: -60px 0px }
a.lang.uk { background-position: -80px 0px }
Ici imaginez un sprite avec des drapeaux de pays... au lieux d'avoir une image par drapeau, vous n'en avez donc qu'une.
Il suffit alors dans le CSS de définir la position de chaque drapeau via "background-position" et le tour est joué.
Comment créer des sprites rapidement ?
Pour vous éviter de faire les sprites à la main, vous pouvez simplement utiliser quelques outils online qui vous allez le constater... sont bien pratique !
spritegen.website-performance.org vous propose un générateur de sprites :
Vous mettez toutes vos images dans un .zip, vous uploadez ce fichier zippé et spritegen vous génére de lui même le sprite en vous donnant même le code CSS avec les positions qui conviennent !
spriteme.org vous propose quant à lui un "plugin" javascript à ajouter à vos favoris qui analyse les images de n'importe quel site sur lequel vous surfez et vous propose de générer des sprites avec ces images.
Des graphs sur votre site
Vous voulez inserer des graphiques sur vorte site mais ça vous semble compliqué au premier abord ?
Et bien non, c'est très simple puisqu'il existe heureusement quelques librairies gratuites qui vont vous les générer automatiquement en leur envoyant simplement les données et quelques paramètres.
Je ne vous présenterai ici que mes 2 préférées :
- JPgraph (librairie PHP basée sur GD) :
Exemple:
Tous les exemples ici.
La doc ici.
- FusionCharts (Flash) :
Exemple:
Tous les exemples ici.
La doc ici.
Voila, je vous laisse choisir... (moi j'aime bien FusionCharts car le rollover sur les données est bien pratique je trouve, et l'animation ajoute un ptit plus !)
Tester la charge de votre site web
Vous venez de prendre un hébergement dédié pour monter votre nouveau site et vous aimeriez tester votre serveur pour connaitre le nombre de clients qu'il peut supporter simultanément... deux solutions :
- appeler toute votre famille,vos potes, vos collègues pour tester le site tous en même temps (bon ok il faut une grande famille et beaucoup de potes 
)
- utiliser Tsung !
En effet, Tsung est un outil (sous linux) qui permet de simuler du trafic sur votre site.
Après l'avoir installé, il vous suffit de le lancer en mode "proxy" en lançant la commande "tsung-recorder start"ce qui va vous créer un proxy en local sur le port 8090.
Configurez ensuite votre navigateur préféré pour passer par ce proxy et commencez à surfer sur votre site. Toute votre navigation sera alors logguée par Tsung.
Une fois terminé, stoppez le proxy avec un "tsung-recorder stop", récupérez le log ainsi créé et plongez vous dans la doc de Tsung pour comprendre comment utiliser ce log pour construire votre scénario de test (c'est très simple mais si vous avez besoin d'un conseil, je suis là ).
Grosso modo, vous n'avez qu'à choisir le temps total de votre scénario et la fréquence d'arrivée des clients.
Une fois votre scénario (tsung.xml) créé, lancez la commande "tsung start" et attendez la fin...
Lorsque le test de charge est terminé, vous pouvez générer le rapport et les graphs avec la commande "/usr/lib/tsung/bin/tsung_stats.pl" qui va vous créer les .html et .ps correspondants au résultats du test.
Attention : Pour que votre test de charge puisse fonctionner correctement, il vous faudra une bande passante digne de ce nom... de chez vous avec une ligne ADSL classique ce n'est même pas la peine d'essayer car ce que vous aller tester ce n'est pas le serveur mais plutôt votre propre bande passante !
Préférez donc lancer ce test depuis un autre serveur dédié (pourquoi pas chez le même hébergeur) ou carrement en utilisant le webservice EC2 d'Amazon (qui fera peut être le sujet d'un prochain article sur ce blog si ça vous interesse) qui vous permet d'utiliser les serveur (et la bande passante de ouf) d'Amazon à très faibles frais.