Antoine Guiral : apprenti du web 2.0

Partage d’expériences sur le web

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

Publié par Guiral antoine sur 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

Publié par Guiral antoine sur 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é: , , , , , , | Aucun commentaire »

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

Publié par Guiral antoine sur 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.

  • Les images

Pour vous faciliter la tâche je vous mets les images utilisées pour ce tutoriel. Cependant rien ne vous empeche d’utiliser les votres! Donc clic droi -> enregistrer l’image sous puis renommez les.

  • B_vert.png B_vert.png
  • BL_vert.png BL_vert.png
  • BR_vert.png BR_vert.png
  • L_vert.png L_vert.png
  • R_vert.png R_vert.png
  • T_vert.png T_vert.png
  • TL_vert.png TL_vert.png
  • TR_vert.png TR_vert.png
  • Le XHTML

Le premier point est assez simple à comprendre : on veut que notre cadre soit extensible en hauteur et en largeur. Nous souhaitons en plus pouvoir mettre une image de bordure différente pour chaque cotés de notre cadre.

Nous allons imbriquer nos “div” les uns dans les autres. De cette manière les “div” les plus à l’exterieur s’ajusteront automatiquement à la taille du “div” le plus imbriqué.

<div id="L">
	<div id="R">
		<div id="T">
			<div id="B">
				Mon texte
			</div><!--**** Fermeture #B **** -->
		</div><!--**** Fermeture #T **** -->
	</div><!--**** Fermeture #R **** -->
</div><!--**** Fermeture #L **** -->

Vous pouvez voir que j’ai déjà placé des “id” dans mes “div” de manière a pouvoir appliquer des styles à chacun d’eux. “L” correspondant à “left” pour la bordure de gauche, “R” à “right” pour celle de droite, “T” à “top” pour celle du haut et enfin “B” à “bottom” pour celle du bas.

Attention : pensez à utiliser des “class” plutot que des “id” si vous utilisez plusieurs cadres du même type sur votre page.

A ce moment là nous avons une structure extensible pour laquelle nous pouvons mettre grace au CSS des bordures. Cependant il nous manque la possibilité de placer nos angles. En effet, le CSS nous permet de ne placer qu’une seule image grace à la propriété background-image:url(path/to/mon-image.png). Donc ici 4 “div” nous donne 4 bordures : il nous manque les 4 “div” correspondant aux 4 angles de notre cadre.

Voila ce que l’on obtient :

<div id="L">
	<div id="R">
		<div id="T">
			<div id="B">
				<div id="TL"> </div>
				<div id="TR"> </div>
				<div id="BL"> </div>
				<div id="BR"> </div>
				Mon texte ici : Hello world
			</div><!--**** Fermeture #B **** -->
		</div><!--**** Fermeture #T **** -->
	</div><!--**** Fermeture #R **** -->
</div><!--**** Fermeture #L **** -->

Pas besoin de vous expliquer les “id“? :-) Allez je vous fait le premier : “TL” pour “top-left” ce qui correspond au coin supérieur gauche,etc…

Remarque 1 : nous n’imbriquons pas les “div” qui servent aux angles. Nous les placerons grace au CSS.

Remarque 2 : nous n’utilisons pas la balise img” pour les angles alors qu’il n’y à pas de répétitions. Pourquoi? Parce qu’il est important de séparer une image de contenu (une illustration pour votre texte par exemple, ou un logo) et une image de présentation ou de design (les images de nos bordures ou une image de fond).

  • Le CSS

Commençons par positionner les angles. On va les positionner en “absolute” dans le conteneur parent (ici : le div “id#B“).

div{position:relative}

#TL{
position:absolute;
background:url(images/TL_vert.jpg) left top;
background-repeat:no-repeat;
top:0px;
left:0px;
height:50px;
width:50px
}
#TR{
position:absolute;
background:url(images/TR_vert.jpg) top right;
background-repeat:no-repeat;
top:0px;
right:0px;
height:50px;
width:50px
}
#BL{
position:absolute;
background:url(images/BL_vert.jpg) bottom left;
background-repeat:no-repeat;
bottom:0px;
left:0px;
height:50px;
width:50px
}
#BR{
position:absolute;
background:url(images/BR_vert.jpg) bottom right;
background-repeat:no-repeat;
bottom:0px;
right:0px;
height:50px;
width:50px
}

Commentaire 1 : les arguments après l’url de l’image servent à positionner le background dans le bloc pour assurer le positionnement si le div est plus grand que l’image de l’angle.

Commentaire 2 : les top, left, right, bottom à “0px;” sont là pour placer les “div” pour les angles. Ne pas oublier qu’on les positionne en absolute!

Commentaire 3 :les height et width définissent la taille des “div” pour les angles. Vous devez ajuster ces valeurs en fonction de VOS images.

Plus que les bordures (ouf!). Comme d’habitude le source et on décortique après!

.div{position:relative} // tout au début du css pour factoriser le code :-)

#L{
background:url(images/L_vert.jpg) repeat-y 0 0;
background-position:center left
}
#R{
background:url(images/R_vert.jpg) repeat-y 100% 0;
background-position:center right
}
#T{
background:url(images/T_vert.jpg) repeat-x 0 0
}
#B{
background:url(images/B_vert.jpg) repeat-x 0 100%
}

Commentaire 1 : attention au repeat-y et repeat-x suivant que l’on travaille sur une bordure horizontale ou verticale. A chaque fois on utilise une images de largeur très fine (par exemple 2px) à laquelle on appliquera un repeat. Cela nous donne la caractère extensible.

Commentaire 2 : le background-postion est une autre manière de positionner le fond dans le bloc (à comparer au commentaire 1 des angles).

Voila vous avez tout pour réussir vos cadres extensibles. Si vous avez des questions je reste bien sûr à votre entière disposition. Et n’hésitez pas à me laisser des commentaires, à me signaler des bugs, coquilles, etc etc…

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