Création d'un nouveau projet web.

ProjectDeploy.org est un site web qui permet de créer une structure de base pour votre projet web.

picture-14

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.


XSL dans un XML grâce à PHP

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();
?>


Animons nos page avec jQuery

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.

Voir la démonstration

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


jQuery : On commence...

Voilà le premier article sur jQuery. Mais qu'est-ce que jQuery ?
jQuery est un "framework" javascript qui permet d'utiliser le DOM, et d'agrémenter vos pages par des animations, ou différentes fonctionnalités AJAX.

Pour utiliser jQuery nous allons dans un premier temps télécharger la librairie sur le site officiel.

Ensuite ajouter la dans votre page html entre les balises <head> et </head> grâce à


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

Maintenant nous pouvons utiliser jQuery grâce à : $(...)

Ceci $() va nous permettre d'utiliser les différentes fonctions de jQuery.
Par exemple si dans notre page nous avons <div id="mondiv">contenu de mon div</div> je vais pouvoir selectionner cet element avec jQuery.
$("#mondiv") va nous permettre de selectionner notre element comme en CSS #mondiv selectionnera la balise avec l'id correspondant.

Exemple de page html avec l'utilisation de jQuery qui permet de cacher l'élément.


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mondiv">contenu de mon div</div>
<script>$("#mondiv").hide(slow)</script>
</body>
</html>


Ouverture du blog !

Bienvenue sur le nouveau blog Point2Zero !

Ce blog sera essentiellement un blog technique.

Au programme : les dernieres nouvelles du site, ainsi que différentes astuces dans différents languages de programmation tel que le CSS, jQuery, PHP ou encore le xHTML.


Articles suivants »