JQuery, PHP, html, design… // arnaud-k : un blog de geek

Mysuitestuff est un site proposant les coussins en forme de logo des logiciels Adobe. Les coussins sont fait maison, ils annoncent entre 8 et 9 semaines pour les commandes ! Les couleurs des coussins sont bien sympas et respectent bien les couleurs originelles des logos. Il est également proposé deux coussins qui suivent la forme des logos de Tweetie (une appli Twitter). Les prix sont assez corrects, il faut compter 15$ pour un coussin.

Aujourd’hui, j’ai décidé de présenter plusieurs galeries / blogs qui aident à trouver de l’inspiration et de suivre les dernières tendances en matière de web design.

Foliofocus.com

Foliofocus est une galerie de sites web, la particularité de celle-ci est qu’elle ne présente que des portfolios ! On y trouve donc pas mal de sites audacieux.

CssLeak.com

CssLeak propose, quant à lui, à la fois un blog qui parle de toute la partie front end dans la création de sites web : design, intégration, javascript (j’y ai même lu des articles sur JQuery !)

designshack.co.uk

Un peu le même principe que CssLeak, Design Shack propose un blog (qui ne parle ici quasiment que de web design) et une galerie CSS. La manière de parcourir la galerie est bien faite : on peut trouve un design par couleur, par forme de site ou par catégorie.

thedesigninspiration.com

The Design Inspiration est un blog qui se veut une grosse source d’inspiration. On y retrouve des logos, des illustrations, des web design, des photos, des patters et des typographies. Il y a en moyenne une dizaine d’articles par jour !

Ce n’est pas dans mon habitude que de mettre des vidéos sur ce blog, mais là j’ai vraiment pas pu résister. C’est ce genre de vidéo ou tout s’enchaine, ça commence par une petite voiture qui va faire tomber des dominos, ça continue avec des billes qui actionne un pneu et ça finis en beauté après avoir fait tomber un piano et fait voler une tv…

Tout cela est en fait un clip d’une chanson de OK Go (la chanson n’est d’ailleurs pas si mal), la réalisation est donc très pro. L’enchainement dure presque 4 minutes en tout !
Enjoy’ !

Après le précédent billet présentant la fonction clone de JQuery, j’ai décidé de te parler d’une autre fonction méconnue de JQuery : la fonction serialize.

Alors que fait-elle cette fonction ?

Pour appeler serialize, il faut avoir en sélecteur un formulaire. Serialize va tout simplement retourner une chaine de caractères contenant toutes les valeurs des champs de ce formulaire. La chaine est formatée pour être envoyée en Ajax par la suite ( de type champ1=valeur1&champ2=valeur2&champ3=valeur3… ). La où la fonction serialize va être utile, c’est qu’elle permet de créer une fonction qui va permettre d’envoyer n’importe quel formulaire en Ajax avec une seule fonction.

Comme d’habitude, la demo est par là :
demo de la fonction serialize

Admettons que l’on ajoute la classe « ajax » à tous les formulaires que l’on souhaite envoyer en Ajax :

<form class="ajax" action="data.php" method="post">
     <p>
          <label for="nom">Nom :</label>
          <input type="text" name="nom" id="nom" />
     </p>
     <p>
          <label for="email">Email :</label>
          <input type="text" name="email" id="email" />
     </p>
     <p>
          <input type="hidden" name="typeform" value="inscription" />
          <input type="submit" value="inscription" />
     </p>
</form>

Ici, j’ai créé un formulaire d’inscription simple demandant seulement un nom et un email. Un champ caché (nommé typeform) va permettre de différencier le formulaire des autres pour le traitement en PHP (en assumant que tous les traitements en Ajax se passe dans le même fichier).

Le JQuery va être ici très simple (en connaissant les bases de JQuery ) :

$('form.ajax').submit( function(e) {
     e.preventDefault(); // on empeche l'envoi du formulaire par le navigateur
     var datas = $(this).serialize();
     $.ajax({
          type: 'POST',      // envoi des données en POST
          url: $(this).attr('action'),     // envoi au fichier défini dans l'attribut action
          data: datas,     // sélection des champs à envoyer
          success: function(msg) {     // callback en cas de succès
               alert('success : '+datas);
          }
     });
});

C’était simple non ? La fonction serialize de JQuery est toute simple, mais super utile ! Elle permet vraiment de factoriser le code.

Encore un nouveau thème pour le blog, je sais que le dernier datait d’il y a moins de 3 mois… Mais il ne me plaisait déjà pu et j’avais d’autres idées en tête !

Pour celui là, que j’ai également conçu et intégré moi-même, j’ai assayé de faire le plus simple et le plus propre possible. Un fond de page uni, un fond de contenu uni, des icônes monochromes… Les éléments les plus travaillés étant le logo et les titres de la sidebar (que j’ai au passage allégée). Que dire de plus ? A part que j’attends ton avis sur ce design ! Et si vous constatez des bugs graphiques, des portions non traduites, n’hésitez pas à me le signaler dans les commentaires.

Pour parler un peu technique, je suis parti d’un thème Wordpress minimaliste, avec le moins de styles différents et le plus simple possible afin de repartir (du plus proche possible) de zéro. Avec la base et le codex Wordpress pour personnaliser les éléments, c’est allé plus vite que je ne le pensais. Maintenant j’ai plus qu’à attendre de voir si le nouveau design n’a pas d’impact négatif sur le référencement du blog !

A ce que j’ai compris, Swiths est une agence web Polonaise. Le web design (tout en texture bois) et l’en-tête tout particulièrement est très travaillé. Je trouve que le rendu est très réussi. Le menu en Flash est simple mais j’apprécie l’effet de survol, le switcher de langue est également bien fait ! Le footer où l’on voit la fin du bureau donne un bel effet je trouve.

Et comme dirait Pascal, ils sont forts en web design dans les pays de l’Est ! Bon assez parlé, je te laisse y aller !

JQuery propose par défaut des tas de fonctions super utiles mais qui sont assez peu utilisées. J’ai découvert la fonction clone il y a peu (en jetant un oeil sur mon mémento JQuery 1.4). Tu l’as peut-être deviné, la fonction clone() permet de dupliquer un élément du DOM dans la page.

Comme d’hab, je t’ai préparé une petite démo :

Demo

Pour mon exemple on va dupliquer une liste déroulante <select> (en fait tout le paragraphe qui le contient) pour permettre à l’utilisateur de sélectionner plusieurs catégories :

     <label for="categorie">Choisissez une catégorie :</label>
<select class="cat" name="categorie[]">
          <option>Sélectionnez une catégorie</option>
          <option value="jquery">JQuery</option>
          <option value="html">HTML</option>
          <option value="php">PHP</option>
          <option value="css">CSS</option>
     </select>

Les crochets à la fin de l’attribut name du select nous permettra de récupérer les valeurs des plusieurs select dupliqués en faisant un simple foreach (en PHP).

Passons maintenant à la partie JQuery (attention ça va aller très vite !) :

$(document).ready(function() {
     $('select.cat:last').live('change',function(){
          if( $(this).val() != '' )
          {
               $(this).parent().clone(true).insertAfter($(this).parent());
          }
     });
});

Et voilà ! Comme tu le sais probablement déjà la ligne 1 permet d’attendre que la page soit fini de charger (que le DOM soit ready).

A la ligne 2, le sélecteur select.cat:last permet de sélectionner uniquement le dernier select ayant la classe « cat ». Pour plus de renseignements sur l’événement « live », je t’invite à relire mon précédent article sur ce sujet. Donc quand la valeur de ce dernier select change, on exécute la suite.

La ligne 3 permet de tester si la valeur du select n’est pas vide.

L’astuce du jour se trouve véritablement à la ligne 5. Tout d’abord on sélectionne le parent du select (.parent()). On a donc tout le paragraphe. Ensuite on clone ce paragraphe (.clone()) et on l’insère après (insertAfter()) le paragraphe contenant le dernier select.

Ce n’était pas si compliqué que ça ?

Et enfin, et parce que je suis super sympa, voici comment on récupère les valeurs en PHP de tous les select générés :

if( !empty( $_POST['categorie'] ) )
{
     foreach( $_POST['categorie'] as $categorie )
     {
          echo $categorie . '
';
          // faire ici le traitement voulu, le foreach va parcourir toutes les catégories du tableau
     }
}

Voili, voilou (comme dirait Flanders), c’était le retour des articles avec plein de JQuery dedans. Tiens-toi prêt, j’ai d’autres petites astuces en stock !