Point2Zero » xHTML http://www.point2zero.net/blog Bring to you Information Technology Tue, 23 Mar 2010 11:17:35 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Le Fieldset peut être utile en jQuery http://www.point2zero.net/blog/2010/03/13/le-fieldset-peut-etre-utile-en-jquery/ http://www.point2zero.net/blog/2010/03/13/le-fieldset-peut-etre-utile-en-jquery/#comments Sat, 13 Mar 2010 15:10:01 +0000 ChoiZ http://www.point2zero.net/blog/?p=985

Pendant mes cours de xHTML, CSS, Javascript cette semaine j'ai expliqué l'utilisation de la balise html fieldset.

J'utilise un plugin jQuery qui permet grâce à l'utilisation des balises fieldset d'avoir un formulaire qu'on remplis pas à pas.

Prenons un exemple de code tel que :

<!-- N'oubliez pas d'ajouter ici le doctype et les balises html, head etc... -->
<body>
  <div id="page">
    <form action="submit.php" method="post">
      <fieldset>
        <legend>Informations Personnelles :</legend>
        <label for="nom">Nom :</label>
        <input id="nom" name="nom" type="text" />
        <label for="prenom">Prénom :</label>
        <input id="prenom" name="prenom" type="text" />
        <label for="sexe">Sexe :</label>
        <input id="sexem" name="sexe" type="radio" value="m" />M
        <input id="sexef" name="sexe" type="radio" value="f" />F
      </fieldset>
      <fieldset>
        <legend>Domicile :</legend><label for="adresse">Adresse :</label>
        <textarea id="adresse" cols="50" rows="3" name="adresse"></textarea>
        <label for="cp">Code Postal :</label>
        <input id="cp" name="cp" type="text" />
        <label for="ville">Ville :</label>
        <input id="ville" name="ville" type="text" />
      </fieldset>
      <fieldset>
        <legend>Compte :</legend>
        <label for="identifiant">Identifiant :</label>
        <input id="identifiant" name="identifiant" type="text" />
        <label for="mdp">Mot de passe :</label>
        <input id="mdp" name="mdp" type="password" />
        <label for="confirm">Confirmation :</label>
        <input id="confirm" name="confirm" type="password" />
      </fieldset>
      <p>
        <input id="submit" name="submit" type="submit" value="Envoyer" />
      </p>
    </form>
  </div>
</body>
</html>

Les trois parties du formulaire : Informations Personnelles, Domicile et Compte seront découpé en 3 étapes sur 3 pages avec une navigation "etape précédente" et "étape suivante".

L'utilisateur peut donc voir qu'il y a 3 étapes pour valider le formulaire, je trouve que le formulaire est plus clair quand il est fait étape par étape.
Voir la démo. Télécharger le plugin.
Pour en savoir plus rendez vous sur la page FormToWizard plugin

]]> http://www.point2zero.net/blog/2010/03/13/le-fieldset-peut-etre-utile-en-jquery/feed/ 0 jQuery + CodeIgniter + Référencement http://www.point2zero.net/blog/2009/12/31/jquery-code-igniter-referencement/ http://www.point2zero.net/blog/2009/12/31/jquery-code-igniter-referencement/#comments Thu, 31 Dec 2009 14:29:33 +0000 ChoiZ http://www.point2zero.net/blog/?p=927

Sur un site j'utilise CodeIgniter et un plug in jQuery pour la navigation (sans recharger tout le contenu).

La navigation comme ça c'est bien mais ça ne fonctionne pas partout et pour le référencement c'est pas terrible.

Donc je vais vous expliquer les différentes modifications que j'ai fait dans mon code source de base pour pouvoir référencer correctement le site avec la navigation en "AJAX".

Dans un premier temps j'ai utiliser le Framework PHP CodeIgniter : http://www.codeigniter.com

Ensuite j'ai téléchargé la librairie jQuery : http://www.jQuery.com ainsi que le plugin jQuery.History disponible ici : http://www.mikage.to/jquery/jquery_history.html

Par défaut les adresses de Code Igniter sont du genre : /index.php/class/méthode etc... ce qui est vraiment pas optimum pour le référencement j'ai donc décidé de supprimer le "index.php/" pour cela j'utilise un fichier .htaccess avec les paramètres suivants :

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]

Ce qui me permet d'avoir : /accueil/login à la place de : /index.php/accueil/login
Ou d'avoir /accueil à la place de : /index.php/accueil

J'ai créer dans /application/controllers un contrôleur que j'ai nommé "page". Ce contrôleur appellera la page demandé avec un header et un footer.

class Page extends Controller {

	function Page()
	{
		parent::Controller();
	}

	function index()
	{
		// Charge la page : /application/views/accueil.php
		$data['main_content'] = 'accueil';
		$this->load->view('includes/template', $data);
	}

	function contact()
	{
		// Charge la page : /application/views/contact.php
		$data['main_content'] = 'contact';
		$this->load->view('includes/template', $data);
	}

}

Ensuite dans le dossier /application/views j'ai un dossier "includes" qui contient :
header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>

template.php

// Header du site
<?php $this->load->view('includes/header'); ?>
// Vue chargé par la variable $main_content
<?php $this->load->view($main_content); ?>
// Footer du site
<?php $this->load->view('includes/footer'); ?>

footer.php

</body>
</html>

Ajouter dans votre htaccess une ligne par page que vous voulez créer à noté on appel toujours "page" qui est notre contrôleur et "accueil" qui est notre méthode ;) 

RewriteRule ^accueil$ /index.php/page/accueil/ [L]
RewriteRule ^contact$ /index.php/page/contact/ [L]

Donc on peut créer un menu dans /application/views/includes/header.php

<div id="navigation">
  <ul>
    <li><a href="/accueil">Accueil</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

Ce menu fonctionnera parfaitement avec tous les navigateurs par contre il rechargera a chaque fois tous les éléments : header.php template.php et footer.php

Pour ne pas recharger a chaque fois tous les éléments on peut utilise le plugin jQuery.History. Ce plug in fonctionne avec des liens avec l'attribut rel="history" et avec des ancres donc des liens avec des #page etc...

J'ai donc fait un petit code en jQuery qui modifie le menu précédent par le code :

<div id="navigation">
  <ul>
    <li><a rel="history" href="#accueil">Accueil</a></li>
    <li><a rel="history" href="#contact">Contact</a></li>
  </ul>
</div>

Le script jQuery qui permet de modifier le menu a la volée est le suivant :

    $(document).ready(function() {
        /* Pour chaque element a qui se trouve dans un li dans un ul dans un element id="navigation" */
        $("#navigation ul li a").each(function(){
            /* On recupere le href et on coupe le slash */
            var ancre = $(this).attr("href").split('/');
            /* On ajoute l'attribut rel avec la valeur history */
            $(this).attr("rel","history");
            /* On modifie l'attribut href par le nouveau avec le # a la place du slash */
            $(this).attr("href","#" + ancre[1]);
        });
    });

Si le navigateur accepte jQuery et le Javascript alors les liens seront de la forme #lien et chargé grâce au plugin jQuery History sinon les liens seront de la forme /lien :)

A l'an prochain bon réveillon ;)

]]> http://www.point2zero.net/blog/2009/12/31/jquery-code-igniter-referencement/feed/ 1 Utilisation d'Url Rewriting avec .htaccess http://www.point2zero.net/blog/2009/06/20/utilisation-durl-rewriting-avec-htaccess/ http://www.point2zero.net/blog/2009/06/20/utilisation-durl-rewriting-avec-htaccess/#comments Sat, 20 Jun 2009 17:22:55 +0000 ChoiZ http://www.point2zero.net/blog/?p=874

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/

]]> http://www.point2zero.net/blog/2009/06/20/utilisation-durl-rewriting-avec-htaccess/feed/ 2 Nouveaux liens ! http://www.point2zero.net/blog/2009/06/04/nouveaux-liens/ http://www.point2zero.net/blog/2009/06/04/nouveaux-liens/#comments Thu, 04 Jun 2009 19:22:14 +0000 ChoiZ http://www.point2zero.net/blog/?p=859

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 ! :P ) 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.

]]> http://www.point2zero.net/blog/2009/06/04/nouveaux-liens/feed/ 2 Création d'un nouveau projet web. http://www.point2zero.net/blog/2009/05/25/creation-dun-nouveau-projet-web/ http://www.point2zero.net/blog/2009/05/25/creation-dun-nouveau-projet-web/#comments Sun, 24 May 2009 22:34:09 +0000 ChoiZ http://www.point2zero.net/blog/?p=836

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.

]]> http://www.point2zero.net/blog/2009/05/25/creation-dun-nouveau-projet-web/feed/ 0 Animons nos page avec jQuery http://www.point2zero.net/blog/2009/05/24/animons-nos-page-avec-jquery/ http://www.point2zero.net/blog/2009/05/24/animons-nos-page-avec-jquery/#comments Sun, 24 May 2009 21:35:12 +0000 ChoiZ http://www.point2zero.net/blog/?p=825

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

]]> http://www.point2zero.net/blog/2009/05/24/animons-nos-page-avec-jquery/feed/ 0 jQuery : On commence... http://www.point2zero.net/blog/2009/05/23/jquery-on-commence/ http://www.point2zero.net/blog/2009/05/23/jquery-on-commence/#comments Sat, 23 May 2009 13:28:29 +0000 ChoiZ http://www.point2zero.net/blog/?p=820

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>
]]> http://www.point2zero.net/blog/2009/05/23/jquery-on-commence/feed/ 0