Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

Articles reli´s: «:design»

[tuto php] générer des images png dynamiquement grâce à php

Posté par Guiral antoine le janvier 20, 2008

Vous avez peut être déjà voulu faire des images qui changeraient en fonction d’un paramètre? Par exemple des images pour proposer des statistiques : vous passeriez le pourcentage et le script vous renverrais une image représentant vos données : pour 75%. Eh bien vous pourrez bientôt le faire! Bien sûr ce tutoriel sera juste une base, à vous de réutiliser ce que vous aurez appris pour l’adapter à vos besoin.

  • Configurer php : la librairie gd2

Ouvrez votre fichier php.ini et décommentez (enlevez le “;” en début de ligne) la ligne : extension=php_gd2.dll.

  • le code!

Tout d’abord il faut indiquer au navigateur le type MIME de ce que va retourner le serveur grâce aux “header” ou “en-tête” HTTP. Ici c’est une image png. Nous allons donc envoyer un header contenant le type et le sous-type : image/png avec php.

<?php
header (“Content-type: image/png”);

Ensuite nous créons l’image avec la fonction imagecreate. Le premier argument est la largeur de l’image, le second est la hauteur.

$image = imagecreate(102,10);

On définit maintenant les différentes couleurs qui seront utilisées par l’image (premier argument) en utilisant imagecolorallocate. La première allocation d’image définit la couleur de fond de l’image.

$gris = imagecolorallocate($image, 199, 200, 199);
$rouge = imagecolorallocate($image, 153,0, 0);
$noir = imagecolorallocate($image, 0, 0, 0);

On va maintenant tracer le cadre noir autour de notre image avec la fonction ImageRectange. Le premier argument est l’image sur laquelle le rectangle va être tracer. Les deux suivant sont les coordonnées de l’angle supérieur gauche (0,0). Les deux suivant, ceux de l’angle inférieur droit (101,9).Nous avons bien une largeur de 102 et une hauteur de 10 : attention à l’origine des repères qui est bien (0,0). Le dernier argument est la couleur. On utilise les variables variables : $couleur vaut “noir” donc ${$couleur} vaudra “$noir” qui est bien la couleur allouée précédemment.

$couleur=”noir”;
ImageRectangle ($image, 0, 0, 101, 9, ${$couleur});

On répéte l’opération à quelques différences près : la fonction utilisée est ImageFilledRectangle qui construit un rectangle plein et non  juste les contours. De plus la largeur du rectangle (donc l’abscisse de l’angle inférieur droit) est envoyé en paramètre au script. Donc nous le récupérons avec la variable serveur $_GET['nom_de_largument'].

$couleur=”rouge”;
ImageFilledRectangle ($image, 1, 1, $_GET['len'], 8, ${$couleur});

Il ne reste plus qu’à renvoyer l’image au navigateur (c’est à dire la sortie standard dans notre cas) grâce à imagepng. Puis à libérer les ressources avec imagedestroy.

imagepng($image);
imagedestroy( $img );
?>

Ca y est! Vous pouvez utiliser votre image en indiquant, dans l’attribut src de la balise html, l’url de votre fichier avec en argument votre pourcentage. Par exemple : <img src=”http://www.e-caveavin.com/cv/tuto/img_stat.php?len=75″ />.

 

Il existe énormement de fonction pour créer des formes ou du texte avec la librairie gd de php.

N’oubliez pas de poster vos créations!! Et si vous avez des questions comme d’hab’, un ptit commentaire :-p

Publié dans tutoriel | Taggé: , , , , , | 2 Commentaires »

[tuto jquery] cadres extensibles animés avec jquery

Posté par Guiral antoine le janvier 15, 2008

Un petit tutoriel rapide pour terminer les explications par rapport à mon cv en ligne. Je vous conseille de lire le tutoriel précédent sur les cadres extensibles en xhtml/css.

JQuery est un framework javascript. Il en existe d’autres comme MooTools [en] ou script.aculo.us [en]. Cela rajoute une couche javascript qui permet de manier les éléments DOM plus facilement. Ils fournissent aussi une quantité impressionnante d’effets très “2.0” ou vous permettent d’utiliser AJAX de manière très simple.

  • Télécharger JQuery et faire le “linkage”

Allez vite télécharger la dernière version stable de JQuery sur le site officiel. Ensuite ouvrez votre editeur préféré et ouvrez le fichier html sur lequel vous voulez tester cet effet (si vous avez fait le tutoriel précédent servez vous en ;-p).

Placez vous entre vos balises <head> et </head> et faites le lien entre votre fichier html et votre fichier javascript qui contient JQuery :

<script type="text/javascript" src="path/to/jquery.js"></script>

Puis entre votre fichier html et le fichier composé de vos fonctions et/ou effets maisons basés sur JQuery (ou pas!) :

<script type="text/javascript" src="scripts/script.js"></script>

Nous sommes parés pour rentrer dans le vif du sujet!

  • La base

Le sélécteur universel JQuery : “$“.  “$” désigne un objet JQuery étant lui même un ensemble d’éléments DOM.

Par exemple : $(“a”) désigne tout les liens présent dans le document. Un autre exemple plus “CSS” : $(“.ma_class”) retourne tout les éléments auxquels on a affécté la classe CSS ma_class. Nous allons donc accéder aux éléments que nous voulons animer grâce à ce sélécteur.

Animate est une méthode JQuery. C’est à dire qu’une fois un ensemble d’éléments séléctionné on va leurs affecter cette méthode. Cette affectation ce fait avec le “.” : $(“mes_elements”).ma_methode();. Cette méthode peux prendre 4 arguments. Dans notre cas nous n’en utiliserons que 2 : le premier pour les attributs CSS que nous voulons modifier, le second pour la vitesse à laquelle s’executera l’effet.

Vous pouvez déclancher vos effets sur plusieurs événements. Dans ce tutoriel  nous utiliserons le click qui se traduit par la méthode : “.clic()”. Pour mon cv j’utilise la méthode “.mouseover” pour faire bouger mes 3 cadres au passage de la sourie sur l’un d’eux.

  • Le code pour un seul cadre

$(“#L”).click(function(){

$(“#L”).animate({width: 300,left:300,top:190}, “fast”);

$(“#B”).animate({height: 130}, “fast”);

});

Commentaire 1 : les effets seront déclanchés sur un clic sur l’élément “#L”. Le premier sélécteur JQuery est donc utilisé pour déclencher l’événement.

Commentaire 2 : on utilise ensuite une fonction anonyme. C’est juste la création d’une fonction temporaire qui n’a pas de nom. On l’a créé juste pour l’occasion et elle ne sera pas réutilisable à un autre endroit dans le code.

Commentaire 3 : on sélectionne ensuite les éléments que l’on veux animer grâce à un nouveau sélécteur JQuery. Dans notre cas nous sélectionnons le cadre le plus externe $(“#L”) pour l’élargir (ainsi tous les div plus “internes” prendront toute la largeur qu’on leur donne ce qui placera nos bordures correctements) en passant comme premier arguments à .animate() : {width:300,left:300,top:190}. Cela à pour effet de passer la largeur de l’élément séléctionné à 300, puis de positionner le cadre à 300 px du bord gauche de la fenêtre et 190 px du bord supérieur de la fenêtre. Le second argument définit la vitesse de l’animation, ici : “fast”. On aurais pu mettre un chiffre en milliseconde (par exemple 300). La même opération est effectuée sur le div le plus “interne” pour forcer l’étirement du cadre en hauteur.

Commentaire 4 : les attributs CSS composé comme “margin-left” s’ecriront “marginLeft” quand ils seront attributs de .animate().

Voila c’est fini! Surtout n’hésitez pas à me poser vos question. Et j’attend avec impatience les url’s de vos réalisations!

A bientôt!

Publié dans projet, tutoriel | Taggé: , , , , , , | Laisser un commentaire »

[tuto web] cadre avec bordures extensibles valide xhtml/css

Posté par Guiral antoine le janvier 13, 2008

Bonjour à tous!

Comme promis un petit tutoriel pour la création de cadres avec bordures extensibles valide XHTML 1.1 et CSS. C’est cette méthode que j’utilise pour le design de mon cv en ligne.

Ce tutoriel est présent sur mon nouveau blog : http://antoine.guiral.info/2008/01/13/tuto-cadre-avec-bordures-extensibles-valide-xhtml-css/. Veuillez m’excuser pour la gène occasionnée.

Publié dans tutoriel | Taggé: , , , , , , , | 15 Commentaires »