La fonction animate() de jQuery en inspire plus d'un !
Voilà deux blog ou vous pourrez voir divers utilisations de cette fonction :
http://www.viget.com/inspire/fun-with-jquerys-animation-function/
Pour les amateurs de bacon :
http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon (la démo)
Et pour finir un script que j'ai utilisé dans un projet qui permet d'attribuer un classement avec des étoiles :
http://www.m3nt0r.de/devel/raterDemo/
Il y a quelques temps on m'a demandé des icones ! Voilà donc 2 gros "pack" d'icones le premier de 5878 icones et un second avec 7500 icones !
Egalement un lien avec des icones "iPhone / iTouch".
Voilà un sujet qui va plaire a certains qui souhaitent changer le nom de leurs page ou améliorer le référencement.
Imaginons que vous avez un site web avec des liens tel que :
- index.php?page=accueil
- index.php?page=contact
etc...
Votre page index.php va inclure une page "accueil.php" ou une page "contact.php".
Problème Google ne vas pas référencer ce qu'il y a apres le "?" donc il va prendre uniquement "index.php".
Voilà une solution pour vous : "l'url rewriting" ou comment réécrire les urls d'une page.
Nous voulons a la place de ces adresses : accueil.html et contact.html, donc dans un premier temps on va vérifier que nous avons le module rewriting dans apache qui se nomme "mod_rewrite".
Maintenant nous allons faire un fichier ".htaccess" avec ce qui suit :
RewriteEngine On RewriteRule ^accueil.html$ /index.php?page=accueil [NC,L]
La première ligne va permettre d'utiliser le module d'apache "mod_rewrite".
La seconde ligne est plus intéressante c'est elle qui va définir notre page "accueil.html" pointe sur "index.php?page=accueil".
Vous pouvez utiliser les expressions régulières par exemple ^ pour le debut de la ligne et $ pour la fin.
A la fin de la ligne vous pouvez voir des flags entre les crochets.
NC signifie No Case donc pas sensible à la case ! Je peux taper ACCUEIL.HTML ou accueil.html ou AcCuEiL.HtmL si je veux.
D'autres flags existent tel que :
RewriteRule ^forbidden.html$ - [F]
Le F envoi un code erreur HTTP 403 (Forbidden) le tiret dit qu'il n'y a pas de réécriture d'url.
RewriteRule ^gone.html$ - [G]
Le G quand a lui renvoi un code erreur HTTP 410 (Gone)
Pour plus d'informations sur les flags : http://httpd.apache.org/docs/2.2/rewrite/rewrite_flags.html
Pour plus d'informations sur l'url Rewriting : http://httpd.apache.org/docs/2.2/rewrite/
Créer, modifier, supprimer vos cookies grâce à ce plugin jQuery !
http://plugins.jquery.com/project/Cookie
Il est plutôt simple d'utilisation j'avais fait il y a 2ans un script pour gerer les cookies avec Javascript et il était bien plus complexe que ce plugin.Pour créer un cookie :
$.cookie("nom_du_cookie", "valeur");
Création d'un cookie valide pendant 30 jours :
$.cookie("nom_du_cookie", "nom_du_cookie", { expires: 30 });
Afficher la valeur du cookie :
alert( $.cookie("nom_du_cookie") );
Supprimer le cookie il suffit de modifier la valeur par null (ou de mettre une expiration a 0) :
$.cookie("nom_du_cookie", null);
Une semaine déjà sans faire un billet c'est long je sais...
Voilà donc des nouveaux liens sur la gauche (l'autre gauche ? la droite ! 
) qui vous permettrons de découvrir pas mal de sites en jQuery ou d'autres technologies.
- Function est un site Anglais plutôt bien fait avec pas mal de design de boutons (avec certains à vendre) et quelques articles qui m'intéressent.
- Nettuts+ est un blog avec pas mal d'articles et de tutoriaux (certains payant également) mais pas mal de contenu est gratuit c'est également un très bon site. N'hésitez pas a voir les sites de la même famille (PSDtuts, Audiotuts etc...).
- Six Revisions je le connais beaucoup moins mais il y a des bons articles également.
Voilà quelques liens sur les différents selecteurs que vous pouvez utiliser avec jQuery :
Egalement une selection des 30 meilleurs plugin jQuery pour le mois de Mai 2009, avec parmis ces plugins le jplayer qui permet la lecture d'un mp3 grâce à jQuery.
Aujourd'hui je vous présente le plugin jQuery "Sparks" qui signifie "étincelles".
Ce plugin est trés graphique et plutôt sympa au premier coup d'oeil j'ai cru a du flash...
Le site http://redflex.co.uk/ utilise ce plugin vous pouvez donc vous rendre là bas pour voir une démonstration.
On peut modifier le nombre d'étincelles a notre guise avec différentes images... Comme l'explique son auteur sur le site officiel du plugin.
ProjectDeploy.org est un site web qui permet de créer une structure de base pour votre projet web.
Par exemple on peut choisir si on fait nos page en html 4.01 ou xhtml 1.0, si on veut faire du transitional ou du strict, si on utilise du css, si on veut inclure du jquery, des plugins etc...
Bref vous définissez vos options et lorsque vous avez fini cliquez sur "deploy!". A ce moment la vous pourez télécharger un fichier zip avec une "structure" de base pour votre projet.
Pour créer un fichier XML en PHP vous avez plusieurs solutions.
La premiére est de créer une variable, d'ajouter vos différentes balises xml, puis de sauver cette variable dans un fichier XML.
Une autre solution est l'utilisation de la classe DOMDocument. Voir la documentation PHP
Le code suivant est un exemple de création d'un XML avec l'intégration d'un fichier XSL au XML directement via PHP.
<?php
// Création du nouveau document dans $doc
$doc = new DOMDocument();
// Permet d'afficher le document au format xml correctement
$doc->formatOutput = true;
// On ajoute notre XSL
$xmlstylesheet = new DOMProcessingInstruction('xml-stylesheet', 'href="fichier.xsl" type="text/xsl"');
// On ajoute notre ligne au document
$doc->appendChild($xmlstylesheet);
// On affiche le document xml créer
echo $doc->saveXML();
?>
Aujourd'hui un exemple pour animer vos pages web grâce à jQuery.
Nous allons utiliser la fonction .animate() celle-ci permet de modifier le css d'un ou plusieurs élément(s) de votre page.
Dans cet exemple nous allons travailler avec cinq liens qui vont nous permettre de faire bouger une balise html <p>.
Dans la balise body placez :
<a href="javascript:void(0)" onclick="anim1();">anim1();</a> <a href="javascript:void(0)" onclick="anim2();">anim2();</a> <a href="javascript:void(0)" onclick="anim3();">anim3();</a> <a href="javascript:void(0)" onclick="anim4();">anim4();</a> <a href="javascript:void(0)" onclick="anim5();">anim5();</a> <p id="p1">Paragraph with some text</p>
Puis dans le head ajouter la bibliotheque jQuery ainsi que nos différentes fonctions :
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function anim1(){
$("#p1").animate(
{
paddingLeft:"100px",
paddingTop:"0px"
},
1000
);
}
function anim2(){
$("#p1").animate(
{
paddingLeft: "200px",
paddingTop:"0px"
},
1000
);
}
function anim3(){
$("#p1").animate(
{
paddingLeft:"200px",
paddingTop:"100px"
},
1000
);
}
function anim4(){
$("#p1").animate(
{
paddingLeft:"100px",
paddingTop:"100px"
},
1000
);
}
function anim5(){
$("#p1").animate(
{
paddingLeft: "200px",
paddingTop:"0px"
},
1000
);
}
</script>
La premiere ligne inclus la librairie jQuery : "jquery-1.3.2.min.js". Ensuite j'ai créer 5 fonctions qui modifieront #p1 comme en CSS la balise avec l'id qui sera égale à p1 soit une balise avec id="p1".
Avec la fonction animate je modifie une ou plusieurs valeurs de CSS pour pouvoir déplacer mon élément sur ma page.
N'hésitez pas à ajouter des commentaires si vous avez besoin de plus d'explications.
Une seconde démonstration. Dans celle-ci j'ai ajouté la fonction fadeTo() qui permet de modifier l'opacité du texte.
Voir la démonstration 2