Après 6 mois d’arrêt, le blog n’est pas (totalement) mort !

Pour une reprise en douceur, voici une sélection de 5 sites web de freelances ou d’agences web qui m’ont plu en terme de graphisme et en terme de navigation !

Ghost Horses

Un travail sur les typographies, un humour très second degrés et une pointe de JavaScript. Le tout avec un design sobre.

Two24

Un site avec une photo en noir & blanc en plein écran et en fond. Le tout très sombre. Je trouve l’ensemble réussi.

Tom Pain

Un joli site avec une navigation originale. Le tout est animé à l’aide de JQuery et la navigation peut se faire au clavier. À tester donc.

2am Media

Le site d’une agence web anglaise, utilisant une grande photo en noir et blanc en background et on retrouve une belle utilisation de la couleur dans les éléments HTML.

Impala Webstudio

Le site d’une agence française, pour une fois ! Un fond gris, des typos recherchées (et utilisant @font-face), des belles photos, un slider (fait avec JQuery)… Tout pour me plaire ! J’aime également assez ce qu’ils ont fait sur la page L’équipe.

.

Pas encore de billet sur le même sujet !

Après 6 mois de pause, je suis de retour sur le blog. Je vais essayer de bloguer de manière plus régulière et de m’astreindre un certain rythme de publication d’articles.

Ces 6 mois n’ont pas été de tout repos, avec plein de projets réalisés au sein de Moon Websites, l’agence web pour laquelle je bosse, et deux projets persos (mais ça j’en reparlerai plus tard).

Au niveau de la ligne éditoriale du blog, elle ne bougera pas pour l’instant. Toujours du JQuery, du web design, du développement front-end et un peu de graphisme et de la photo.

J’espère que tu continueras à me suivre !

Pas encore de billet sur le même sujet !

Pour éviter de présenter un webdesign par ci par là sur ce blog, j’ai décidé d’en regrouper plusieurs par articles, de te faire une sélection hebdomadaire de webdesigns originaux, bien réalisés et qui donnent de l’inspiration.

Pour cette première, j’en ai sélectionné 6 qui sont assez variés. Cela va du portfolio utilisant l’effet bokeh au site d’une agence web australienne avec plein d’illustrations (il faut cliquer sur les captures d’écran pour accéder aux sites).

Yummy Wakame

Un portfolio bien réalisé, très coloré et utilisant l’effet bokeh (voir wikipedia). Tous le site joue avec des effets de lumière.

Green Woods CC

Ce qui m’a le plus marqué celui-ci, c’est bien évidemment le header que je trouve très réussi. Les divers effets de transparence également utilisés dans le contenu et le footer sont également bien faits.

Southern Comfort

Le site allemand d’une marque de liqueur de whisky (il faut donner sa date de naissance pour y entrer !). On y retrouve des illustrations et des photos qui sont intégrées entre elles. Et le site utilise JQuery pour le slider de la page d’accueil, que demander de plus ?

Treme (par Orange Cinéma Séries)

Une fois n’est pas coutume un site en flash et en français. La réalisation est parfaite, la photo utilisée en fond est vraiment réussie.

Make Photoshop Faster

Un deuxième site coloré utilisant l’effet bokeh. Les effets de transparence ainsi que les grosses typographies ajoutent beaucoup au design du site.

Red Tiki

Une web agency austalienne. Le site utilise pas mal d’illustrations, et j’aime particulièrement leur logo (que l’on retrouve aussi en ASCII art dans le code !).

Sur le même sujet :

1. Les web designs de la semaine

Il est toujours compliqué de proposer au internautes de trier des éléments et faire ça de manière simple et ergonomique. On peut, par exemple, proposer de saisir la position pour chaque élément. Mais ça reste contraignant.

C’est dans cette optique qu’apparaît l’option du drag’n'drop (glisser-déposer en français). Je pense que c’est ce qu’il y a de plus simple et intuitif pour l’internaute. Il faut néanmoins le prévenir que l’on attend un glisser-déposer de sa part car ce n’est pas encore répandu absolument partout !

Voir la démo du tutorial

Pour réaliser cela, JQueryUI nous propose le widget nommé Sortable. Il permet de créer et de configurer le drag’n'drop pour une liste d’éléments. Pour commencer, il faut donc inclure : JQuery et JQueryUI (javascript et CSS).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" />
<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>

Pour sauvegarder le tri fait par l’internaute, il faut enregistrer le tout dans la base de données. Je te fournis donc celle utilisée dans la démo. Où chauqe élément à un id unique, name contient le nom du fichier de la photo et position pour enregistrer l’ordre des photos.

-- 
-- Structure de la table `demo_photo`
-- 
CREATE TABLE `demo_photo` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) collate latin1_german2_ci NOT NULL,
  `position` int(11) NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `order` (`position`)
) AUTO_INCREMENT=6 ;
 
-- 
-- Contenu de la table `demo_photo`
-- 
INSERT INTO `demo_photo` VALUES (1, '1.jpg', 2);
INSERT INTO `demo_photo` VALUES (2, '2.jpg', 3);
INSERT INTO `demo_photo` VALUES (3, '3.jpg', 4);
INSERT INTO `demo_photo` VALUES (4, '4.jpg', 1);
INSERT INTO `demo_photo` VALUES (5, '5.jpg', 0);

Ensuite il faut préparer la liste d’éléments sur lequel se portera le tri. Les attributs « id » des éléments de la liste devront respecter une syntaxe particulière : « nomGenerique_id ». Ou nomGenerique est le même pour tout les éléments (par exemple « photo ») et id l’identifiant unique (dans la base de données) de l’élément à trier.

Pour afficher la liste, on récupère bien sûr les éléments dans la base de données, en respectant l’ordre enregistré :

<ul id="list-photos">
	<?php
	//connexion à la base de données 
        define('DB_NAME', 'nom_de_la_base');
        define('DB_USER', 'nom_utilisateur');
        define('DB_PASSWORD', 'mot_de_passe');
        define('DB_HOST', 'localhost');
	$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
	mysql_select_db( DB_NAME , $link );
 
	// récupération des photos dans le bon ordre
	$result =   mysql_query( 'SELECT demo_photo.id, demo_photo.name FROM demo_photo ORDER BY demo_photo.position ASC' , $link );
	while( $photo = mysql_fetch_assoc( $result ))
	{
	?>
	<li id="photo_<?php echo $photo['id'] ?>">
		<img src="photos_NY/<?php echo $photo['name'] ?/>" alt="Photos NY - Arnaud-k" />
		<p>par Arnaud-k</p>
	</li>
	<?php
	}
	?>
</ul>

Il faut ensuite mettre en forme cette liste avec du CSS. Je ne pense pas qu’il faille beaucoup d’explications pour cette partie là.

/* style global de la liste non ordonné */
ul#list-photos{
  list-style:none;
  height:140px;
}
/* style des éléments de la liste */
ul#list-photos li{
  border:1px solid #ddd;
  padding:10px;
  cursor:move;
  height:100px;
  width:75px;
  float:left;
  margin-right:10px;
  background:#fff;
  color:#212326;
  font-size:12px;
  -moz-box-shadow:2px 2px 5px #ccc;
}
/* style de l'élément fantome, qui apparait losque que l'on bouge un élément */
ul#list-photos li.highlight{
  background:#f2f2f2;
  border:1px dashed #212326;
}

Ensuite vient la partie qui nous intéresse vraiment, le code JQuery. On initialise Sortable avec l’id de la liste et on met en Callback l’appel Ajax au fichier PHP qui va procéder à l’enregistrement dans la base données :

$(document).ready( function(){ // quand la page a fini de se charger
  $("#list-photos").sortable({ // initialisation de Sortable sur #list-photos
	placeholder: 'highlight', // classe à ajouter à l'élément fantome
	update: function() {  // callback quand l'ordre de la liste est changé
		var order = $('#list-photos').sortable('serialize'); // récupération des données à envoyer
		$.post('ajax.php',order); // appel ajax au fichier ajax.php avec l'ordre des photos
	}
  });
  $("#list-photos").disableSelection(); // on désactive la possibilité au navigateur de faire des sélections
});

Et voici enfin le contenu du fichier ajax.php qui enregistre les positions des éléments. On récupère un $_POST de la forme : photo[] = id_photo. Il suffit de boucler sur ce tableau ($_POST['photo']) et on récupère les id des photos dans l’ordre :

<?php
//connexion à la base de données 
define('DB_NAME', 'nom_de_la_base');
define('DB_USER', 'nom_utilisateur');
define('DB_PASSWORD', 'mot_de_passe');
define('DB_HOST', 'localhost');
$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
mysql_select_db( DB_NAME , $link );
 
// changement de l'ordre des photos dans la base de données, photo par photo
foreach( $_POST['photo'] as $order => $id_photo )
{
    mysql_query( 'UPDATE demo_photo SET position = \'' . safe( $order ) . '\' WHERE id = \'' . safe( $id_photo ) . '\'' , $link ) or die( mysql_error() );
}
 
/*****
fonctions
*****/
function safe($var)
{
	$var = mysql_real_escape_string($var);
	$var = addcslashes($var, '%_');
	$var = trim($var);
	$var = htmlspecialchars($var);
	return $var;
}
?>

J’espère que tutoriel est clair et compréhensible. Il faut, certes, un minimum de connaissances en html, javascript et php mais je pense que ça vaut quand même le coup !

Pas encore de billet sur le même sujet !

Un article rapide, juste pour signaler que j’ai préparé une page WordPress recensant tous les plugins JQuery dont j’ai pu parlé sur ce blog. A ce jour j’en ai dénombré 56 ( \o/ ). J’en ai profité pour les classer par catégorie, en espérant que te sera utile pour les jours où tu auras besoin d’un plugin JQuery !

Pas encore de billet sur le même sujet !

Comme à peu près tous les 6 mois depuis que je tiens ce blog, j’ai fait une grosse mise à jour du design du blog. Voici une description des différentes modifications.

Pour commencer, j’ai essayé de faire un vrai logo.  Fini le « arnaud-k » en texte avec deux ou trois effets photoshop… Ce logo, avec des proportions plus simple à intégrer, je vais pouvoir m’en servir sur mes divers sites.

J’ai voulu un design plus clair, plus travaillé et mieux fini que le précédent (qui, je dois bien l’avouer, avait été fait à l’arrache). J’ai donc pris mon temps pour faire la maquette (étalé sur 2 semaines), et l’intégration à WordPress (intensif sur un week-end).

J’ai également décidé d’adopter un code couleur pour les principales catégories / principaux mots-clefs pour permettre d’identifier plus rapidement différents articles sur la page d’accueil :

• Bleu pour JQuery
• Jaune pour les Tutoriaux
• Vert pour le Web Design
• Rouge pour les actualités du web

J’ai également utilisé la propriété CSS @font-face pour les différents titres présents sur le site avec la méthode décrite dans mon précédent article.

Je sais qu’il reste encore un ou deux détails à corriger, mais ça sera fait normalement dans la semaine ! Un autre article devrait faire suite à celui, où j’aborderai plus le côté technique pour l’intégration dans WordPress et de ce que j’ai pu utiliser ici. N’hésite pas à donner ton avis / critiquer / faire des compliments.

Sur le même sujet :

1. Le blog, le retour !

Avec les nouveaux navigateurs, les nouvelles normes et les nouvelles technologies on peut maintenant sereinement utiliser la propriété CSS @font-face et faire en sorte que ça marche sur tous les navigateurs ! Avec certes un ou deux hacks CSS, notamment pour IE6 et pour éviter que des fichiers soient chargés plus que nécessaires.

Voici par exemple, la technique utilisée et décrite par Paul Irish (qui travaille, entre autres, pour Google Chrome et fait partie de la JQuery team) dans son article « Bulletproof @font-face syntax » :

@font-face {
   font-family: 'Graublau Web';
   src: url('GraublauWeb.eot');
   src: local('☺'),
   url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Pour avoir des explications complètes, je te conseille fortement l’article présenté ci-dessus. On voit bien qu’il faut posséder la typo dans différents formats (eot, woff, ttf) pour que @font-face fonctionne partout.

Et c’est là qu’intervient le site FontSquirrel et son « @font-face generator kit ». A partir de l’upload d’une typo (j’ai testé avec une .ttf), il la convertit dans les formats qui nous intéressent, prépare une page de démo avec le CSS qui va bien et, enfin, propose de télécharger une archive de tout ça ! J’ai fait le test avec un typo que j’avais et tu peux voir le fichier de démo de FontSquirrel.

Cela ouvre quand même de belles perspectives, tant que ça ne part pas dans tous les sens. J’ai d’ailleurs décidé d’utiliser cette technique pour le prochaine re-design du blog (coming soon).

Pas encore de billet sur le même sujet !

12 mois après ma première liste des meilleurs plugins JQuery, je me suis dit qu’une petite mise à jour s’imposait. Dans cette liste j’ai mis quelques plugins dont j’ai déjà parlé ici,des plugins que j’utilise tous les jours et des plugins que je compte utiliser dans le futur.

Ce n’est pas vraiment un « Best Of », c’est juste une sélection de plugins JQuery coup de coeur. Et comme c’est le principe d’une liste, celle-ci est tout à fait subjective .

JQueryUI

Comment ne pas commencer par JQueryUI… Ce n’est pas vraiment un plugin JQuery, mais il propose tellement de bonnes choses que je suis sûr que tous les développeurs qui utilisent JQuery l’ont utilisé au moins une fois. Avec JQueryUI tu peux faire des DatePicker, des boîtes modales, des listes avec du Drag’n'Drop, …

Qtip

J’en ai déjà parlé sur le blog, mais pour moi le plugin JQuery Qtip est le meilleur plugin pour faire des tool-tips. Le nombre d’options et de configurations permet d’en faire ce que l’on veut.

JgChart

Le plugin JgChart est une simple surcouche à l’API Google Chart. Cela permet de faire des graphiques encore plus facilement et de le configurer plus simplement.

BxCarousel

J’en ai parlé sur ce blog il n’y a pas si longtemps que ça. Mais pour ceux qui n’était pas là, BxCarousel détone, pour moi, Jcarousel dans les plugins de carousel. Il est plus simple à mettre en place et, surtout, beaucoup plus simple à personnaliser graphiquement.

DataTables

Ce plugin JQuery permet de faire des tableaux triables et paginables. DataTables facilite l’ergonomie des tableaux de données. Le tout sans recharcger la pge of course. Il propose également la recherche directement dans le tableau.

AjaxUpload

Ce plugin JQuery permet, comme son nom l’indique très clairement, de faire de l’upload en Ajax. Assez simple d’utilisation et à configurer, AjaxUpload est idéal pour proposer des formulaires d’upload d’avatar par exemple…

NivoSlider

J’ai parlé la semaine dernière de Nivo Slider. Il s’est retrouvé dans un liste de 3 sliders JQuery. NivoSlider propose beaucoup d’options et plusieurs Callbacks pour animer le slider. Certes, j’avoue que certains effets de transitions sont un peu kitsch…

Fancybox

Fancybox est pour moi le meilleur plugin de lightbox JQuery. C’est celui que j’utilise depuis un an dans tous les sites web sur lesquels je participe ! Ses options et ses personnalisations en font un plugin souple et simple à mettre en place. Je ne me suis jamais trouvé bloqué avec la fancybox.

Juitter

Juitter est un plugin JQuery différent de ceux présentés ci-dessus. Il permet d’afficher une timeline, un recherche Twitter. Comme tu peux le voir, il gère les avatars, les mentions, les hashtags…

AutoComplete

Un autre plugin JQuery que j’ai pu utiliser ces derniers temps : AutoComplete. Il ne faut pas se fier à son apparence, c’est un plugin vraiment puissant. Il propose pas mal de fonctionnalités avancées telles que la gestion du cache, les délais, des callbacks avant l’affichage…

Pas encore de billet sur le même sujet !

Le plugin JQuery jFlickrFeed permet, à partir d’un simple identifiant Flickr, d’afficher les dernières photos d’un membre Flickr. C’est ultra-simple à utiliser, ça ne ralentit pas le chargement de la page (chargement en asynchrone).

Un système de gestion de « templates » a été mis en place pour choisir la structure HTML des photos qui vont être afficher. Voici un exemple de l’initialisation et de la configuration du plugin JQuery :

$('#flickr').jflickrfeed({
   limit: 14, // nombre maximal de photos à afficher
   qstrings: {
      id: '31326696@N02' // id de membre Flickr
   },
   itemTemplate: // template pour l'affichage d'une photo
      '<li>' +
         '<a href="{{image_b}}"><img src="{{image_s}}" alt="{{title}}" /></a>' +
      '</li>'
});

Le plugin offre bien entendu une page de démo du plugin. Il est même tout à fait possible de coupler le plugin JQuery avec d’autres tels que le plugin JQuery Cycle pour faire un diaporama ou la lightbox Colorbox, tout y est expliqué dans les démos !

Pas encore de billet sur le même sujet !

Pour continuer dans la série des lightbox JQuery, un plugin ultra-léger (9 Kio) vient de faire son apparition. Le plugin ColorBox propose quasiment toutes les options qu’un plugin de lightbox peut proposer.

On retrouve environ quarante options : gestion des tailles, gestion de l’opacité, gestion du contenu (inline, html, iframe, images…), gestion des transitions, gestion des vitesses, gestion du clavier et gestion des callbacks (5 au total). Et on a accès à 7 méthodes publiques : next, prev, close, element, resize, init et remove.

Son utilisation reste néanmoins simple, on peut l’initialiser avec juste 1-2 lignes de JQuery en gardant la plupart des paramètres à leur valeur par défaut. Par exemple :

// ici on ne change que les transitions et la vitesse du diaporama
$('a#login').colorbox({transition:'fade', speed:500});

Je ne peut pas te laisser sans un lien vers les démos du plugin JQuery. Je pense que c’est une bonne lightbox, avec la possibilité de faire plein de choses différentes avec. Enfin, et ce n’est pas négligeable, la doc du plugin est claire et facilement trouvable !

Pas encore de billet sur le même sujet !

Aujourd’hui, c’est un assez gros coup de coeur que le design du portfolio d’Adam Dannaway. La page d’accueil représente bien le côté parfois schizophrène dans la création de site web. Avec d’un côté le graphisme du site et de l’autre le développement.

On sent que le site est bien fait, bien fini. Les légères animations Javascript (faites avec Mootools) apporte un plus. Le design reste néanmoins assez sobre avec son fond blanc et ses textes en noir. Ses réalisations sont bien mises en avant.

Pour moi, c’est un site à garder précieusement dans mon Delicious !

Pas encore de billet sur le même sujet !

Le plugin JQuery BMap permet un affichage et un contrôle ultra simple des Google Maps. Avec ce plugin, plus besoin de fouiller dans la doc de Google Maps, il ajout simplement une surcouche afin de contrôler les cartes plus facilement.

Comment ça marche ? C’est très simple, il suffit d’avoir chargé JQuery dans la page ainsi que le fichier de Google Maps (api v3 ou v2) et en quelques lignes, vous pouvez afficher une Google Map avec un ou plusieurs marqueur(s) dessus :

$("#map1").bMap({ // map1 et l'ID du div qui va recevoir la carte
	mapZoom: 11, // niveau de zoom par défaut de la carte 
	mapCenter:[51.501690392607,-0.1263427734375], // latitude et longitude du centre de la carte
	markers:{"data":[ // création de marqueurs dès le chargement de la page
		{
			"lat":51.49757618329838, // latitude du 1er marqueur
			"lng":-0.1746654510498047,  // longitude du 1er marqueur
			"title":"Science Museum",  // titre à afficher dans l'infobulle
			"body":"Exhibition Road, London SW7" // contenu à afficher dans l'infobulle
		},{ // 2è marqueur :
			"lat":51.47769451182406,
			"lng":-0.0009441375732421875, 
			"title":"Royal Observatory Greenwich", 
			"body":"Blackheath Ave, Greenwich, London SE10"
		}	// et on peut ajouter autant de marqueurs que l'on veut...
	]}
});

Ce n’est pas plus compliqué que ça. Il est proposé environ dix options pour afficher juste la carte, après on en trouve d’autres pour les marqueurs, des méthodes AJAX pour l’affichage de zone (polygone ou autre). A noter que l’on quand même se servir d’autres méthodes proposées par Google même en utilisant le plugin.

Ce plugin JQuery reste néanmoins juste une alternative pour afficher et contrôler des Google Maps simples. Je ne pense pas que ce soit l’idéal pour des cartes avec plein d’options de contrôle.

Pas encore de billet sur le même sujet !

Une fois n’est pas coutume, je vais parler d’un site fait en Flash… (n’en déplaise au pro-Apple ). Proximity Philippines est (apparemment) le site d’une agence de com’.

Dès que l’on arrive sur le site, le mode plein écran est activé par défaut. On se retrouve avec un fenêtre où tout un navigateur et un site ont été re-dessiné à la main. Lors de la visualisation du portfolio, on se retrouve même avec plusieurs « onglets » ouverts.

Je trouve le site vraiment bien fait avec un léger humour second degrés : il faut essayer le « panic button » par exemple ou bien cliquer plusieurs fois sur la croix en haut à droite pour fermer le site !

Sur le même sujet :

1. Les web designs de la semaine

Formamotion, un site de tutoriels vidéos en français, propose un tuto vidéo de 12 minutes expliquant l’utilisation du plugin JQuery Uploadify permettant l’upload multiple de fichiers.

Ce tutoriel explique l’utilisation du plugin et (le plus important) sa mise en place et sa configuration. Les 3 premières minutes où le plugin est présenté ne sont pas franchement très utiles contrairement aux explications qui arrivent après.

(j’ai rencontré des problèmes pour l’insertion de la vidéo en utilisant le code proposé par formamotion, chez moi elle ne fonctionne pas sous Firefox – Linux, tu peux toujours la lire sur le site)

Enfin, tu peux également les 4 autres tutoriels vidéos disponibles sur le site en y faisant une recherche sur le mot JQuery !

Pas encore de billet sur le même sujet !

Après un billet (il y a quelques temps déjà) présentant une liste de sites contenant des jolis sliders et la présentation du plugin EasySlider, je vous propose 3 nouveaux plugins pour faire des sliders avec JQuery. Ce sont 3 plugins qui vont faire la même chose, mais avec tout de même quelques diffénces en terme d’options disponibles, de customisations et de contenu (avec images ou textes par exemple).

Plugin JQuery Nivo Slider

Le premier de cette (mini) liste est Nivo Slider. Sa mise en place est aisée et ne demande pas de structure HTML particulière. Apparemment, il ne propose de « slider » que des images (voir des liens contenant… des images).

Le plus intéressant dans ce plugin sont les 19 options disponibles. Outre les options classiques (délais, vittesse, navigation), on peut changer l’animation de transition avec effets assez originaux, la navigation au clavier, l’affichage ou non de miniature sous le slider, la mini-pagination (comme ci-dessus), et diverses callbacks (avant l’animation, après l’animation…).

Pour conclure avec ce plugin, je te laisse aller faire un tour du côté des démos.

Plugin JQuery SimpleSlide

Le deuxième plugin est SimpleSlide. Un plugin, comme son nom l’indique, simple et efficace. Avec ce slider, on n’est pas obligé de faire slider des images, on peut faire défiler le contenu que l’on souhaite !

Par contre, au niveau des options, c’est un petit peu plus léger que le plugin JQuery précédent. On y retrouve les classiques : vitesse et délais, des options pour la barre de statut (elle ne sert pas à naviguer), un callback et c’est à peu près tout. Et si l’on veut ajouter des flèches de navigation (comme ci-dessus), il suffit d’ajout des div avec les bonnes classes (« left-button » par exemple) et le bon attribut « rel ». Avec cette méthode, tu peux aussi faire un bouton de type « jump to » si on veut amener le visiteur à un slide particulier.

D’autres démos de ce plugin sont disponibles ici. Et à noter que tout le contenu du site est dans un SimpleSlide !

Plugin JQuery Orbit

Le dernier plugin de cet article, est similaire à Nivo Slider. Orbit (c’est bien le nom du plugin) permet, en effet, de faire défiler uniquement des images. Je le trouve visuellement réussi, les éléments de navigations, le timer (en haut à droite) sont bien réalisés.

Au niveau des options proposées cela va de la durée de la pause au « mouseout » à la vitesse d’animation de la légende. J’en ai compté 9. Pour moi, il manque quand même la possibilité de paramétrer des callbacks, c’est un des manques de ce plugin. Et c’est à prendre en compte lors du choix du plugin à utiliser.

Maintenant, tu n’as aucune excuse pour ne pas avoir de slider sur ton site !

Pas encore de billet sur le même sujet !

Chose promis, chose due, voici un tutorial pour faire un formulaire de recherche en Ajax avec JQuery et PHP. Idéal si vous avez envie de copier Google Instant, ce type de formulaire permet de faire gagner du temps à vos internautes. Et comme on commence à en voir un peu partout (Google, Youtube, Itunes…), il risque de devenir un standard.

Donc, comme d’habitude, j’ai préparé une démo du tutorial :
Demo

Et c’est parti pour le code. On attaque donc par le code HTML de la page. On prépare le formulaire simplement, j’ai opté pour que l’on n’affiche pas le bouton soumission du formulaire. Et on ajoute un bloc vide, celui-ci contiendra les résultats éventuels.

<!--debut du formulaire-->
<form class="ajax" action="search.php" method="get">
	<p>
		<label for="q">Rechercher un article</label>
		<input type="text" name="q" id="q" />
	</p>
</form>
<!--fin du formulaire-->
 
<!--preparation de l'affichage des resultats-->
<div id="results"></div>

Ensuite le gros du code, le code JavaScript utilisant JQuery :

$(document).ready( function() {
  // détection de la saisie dans le champ de recherche
  $('#q').keyup( function(){
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
 
    // on commence à traiter à partir du 2ème caractère saisie
    if( $field.val().length > 1 )
    {
      // on envoie la valeur recherché en GET au fichier de traitement
      $.ajax({
  	type : 'GET', // envoi des données en GET ou POST
	url : 'ajax-search.php' , // url du fichier de traitement
	data : 'q='+$(this).val() , // données à envoyer en  GET ou POST
	beforeSend : function() { // traitements JS à faire AVANT l'envoi
		$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
	},
	success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
		$('#ajax-loader').remove(); // on enleve le loader
		$('#results').html(data); // affichage des résultats dans le bloc
	}
      });
    }		
  });
});

Et enfin le code du fichier « ajax-search.php » effectuant la recherche et le renvoi des éléments :

<?php
//connexion à la base de données 
define('DB_NAME', 'nom_de_la_base');
define('DB_USER', 'nom_utilisateur');
define('DB_PASSWORD', 'mot_de_passe');
define('DB_HOST', 'localhost');
 
$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
mysql_select_db( DB_NAME , $link );
 
//recherche des résultats dans la base de données
$result =   mysql_query( 'SELECT post_title , post_date , guid
                          FROM wp_posts
                          WHERE post_status = \'publish\'
                          AND post_title LIKE \'' . safe( $_GET['q'] ) . '%\'
                          LIMIT 0,20' );
 
// affichage d'un message "pas de résultats"
if( mysql_num_rows( $result ) == 0 )
{
?>
    <h3 style="text-align:center; margin:10px 0;">Pas de r&eacute;sultats pour cette recherche</h3>
<?php
}
else
{
    // parcours et affichage des résultats
    while( $post = mysql_fetch_object( $result ))
    {
    ?>
        <div class="article-result">
            <h3><a href="<?php echo $post->guid; ?>">< ?php echo utf8_encode( $post->post_title ); ?></a></h3>
            <p class="date"><?php echo $post->post_date; ?></p>
            <p class="url"><?php echo $post->guid; ?></p>
        </div>
    <?php
    }
}
 
/*****
fonctions
*****/
function safe($var)
{
	$var = mysql_real_escape_string($var);
	$var = addcslashes($var, '%_');
	$var = trim($var);
	$var = htmlspecialchars($var);
	return $var;
}
?>

Voilà, c’est tout pour ce tutoriel. Après il peut encore être optimisé en ajoutant des suggestions (toujours à la Google ). Mais on verra ça une autre fois !

Pas encore de billet sur le même sujet !

Voici enfin une bonne alternative au plugin JQuery Jcarousel. Le plugin bxCarousel permet comme son nom l’indique de faire un carousel. C’est la solution idéale pour afficher une multitude de miniature d’images sans prendre trop de place.

Le plugin a l’air plus simple à l’utilisation que Jcarousel, notamment au niveau du design et de l’imbrication d’éléments. Le plugin JQuery propose une dizaine d’options allant de la vitesse de l’animation au nombre d’éléments qui se déplacent en passant par le délai entre les animations.

Voici la liste exhaustive des options du plugin :

$(document).ready(function(){
  $('ul').bxCarousel({
	display_num: 4,       // number of elements to be visible
	move: 4,              // number of elements to the shift the slides
	speed: 500,           // number in milliseconds it takes to finish slide animation
	margin:0,             // right margin to be applied to each "li" element (in pixels, although do not include "px")
	auto: false,          // automatically play slides without a user click
	auto_interval: 2000,  // the amount of time in milliseconds between each auto animation
	auto_dir: 'next',     // direction of auto slideshow (options: 'next', 'prev')
	auto_hover: false,    // determines if the slideshow will stop when user hovers over slideshow
	next_text: 'next',    // text to be used for the 'next' control
	next_image: '',       // image to be used for the 'next' control
	prev_text: 'prev',    // text to be used for the 'prev' control
	prev_image: '',       // image to be used for the 'prev' control
	controls: true        // determines if controls will be displayed
  });
});

Je pense que pouvoir utiliser ce plugin à l’avenir, il me reste néanmoins à voir ce qu’il va réellement donner à l’utilisation !

Pas encore de billet sur le même sujet !

Une (petite) sélection de sites trouvés au fil de mes navigations. J’ai trouvé ces sites créatifs, bien faits visuellement et imaginatifs. Ils ont tous un point commun : l’utilisation de JQuery, certes à divers degrés, mais JQuery tient une part importante dans ces sites.

Appear.dk

Peut-être le site le plus complet en matière de JQuery de cette sélection. J’avoue que c’est un de mes coups de cœur. La navigation y est surprenante !

Jacob O’neal

Une joli portfolio utilisant des effets d’apparition / disparition et des accordéons horizontaux.

Vivo Group.com.au

Le site web d’une agence australienne. Au premier abord on pourrait croire à du flash, mais en fait non.

Cafundo.com.br

Un blog brésilien mélangeant très bien illustrations et JQuery (j’aime assez la sobriété de la sidebar).

Alex Bouga

Je crois qu’il n’y a pas grand chose à dire en terme d’illustrations et d’animations. Il faut aller y faire un tour et tout y essayer

Voilà, je pense qu’avec tout ça la semaine va être assez inspirée ! Et si tu as un site que tu souhaiterais voir apparaître dans une de mes sélections (avec ou sans JQuery) n’hésite pas à m’envoyer un petit lien (contact [at] arnaud-k.fr ).

Sur le même sujet :

1. Les web designs de la semaine

Après deux jours de Google Doodle mystérieux, Google a fait la « Big Annonce » de la journée : la mise en ligne du Google Instant Search. Tout d’abord pour tester cela, rien de plus simple que d’aller sur le site de Google (pas la peine de te donner le lien je présume…) et de commencer une recherche.

C’est magique, on arrive sur la page des résultats tout seul, sans même valider le formulaire. Les résultats s’actualisent à la frappe du clavier et est couplé avec le toujours présent Google Suggest. Une chose que l’on peut dire, c’est que c’est très très très rapide. Google Instant Search porte bien son nom, en effet c’est bel et bien instantané, et en plus, je ne pense pas être le seul à m’amuser avec ce soir (ou ce midi / après-midi aux USA).

A voir ce que cela va donner à l’utilisation, pour une première recherche, les internautes ont pris l’habitude d’utiliser la boîte de moteur de recherche du navigateur (Firefox, Internet Explorer, Opéra, Chrome… le proposent tous).

Et je peux déjà parier sur une pléiade de tutoriels à venir tels que « Faire une recherche à la Google Instant Search » avec Jquery et PHP (ou Mootools et ASP par exemple) ! Et pourquoi pas un petit tutoriel avec JQuery ici (j’ai déjà commencé à y réfléchir ).

Cette petite transgression dans le thème du blog me permet de parler d’une nouvelle fonctionnalité que je trouve particulièrement réussi et de voir l’éventuel impact d’un billet à chaud sur une actualité brûlante, avec peut-être un retour sur cette expérience bientôt !

Pas encore de billet sur le même sujet !

Pour une reprise en douceur, voici un article ne parlant QUE de JQuery, avec en vrac quelques news de la 1ère librairie Javascript et quelques liens vers des tutoriaux / plugins qui m’ont marqués ces derniers temps.

On va commencer par cette info qui a tourné ce week-end : vous pouvez désormais retrouver le podcast officiel de JQuery sur podcast.jquery.com. Cela offre une manière différente d’en suivre l’actualité.

Ensuite un outil bien sympathique, proposé par @FGRibreau : le JQuery Expression BenchmarkR. L’idée est simple, l’outil permet de tester la rapidité d’exécution des sélecteurs. Pour cela, il suffit de saisir un bout de code HTML, de choisir quelques sélecteurs à comparer et l’outil s’occupe du reste : il fait une boucle de 5000 essais par sélecteur, enregistre les temps d’exécution et sort un joli graphique (on peut même choisir la couleur du graphique).

Enfin, pour finir ce premier billet (d’une longue série, je l’espère ), un petit plugin JQuery : JQuery Multiselect (démo dispo ici). Ce plugin part d’un constat, les select multiples ne sont pas simples à utiliser pour un un internaute lambda. En effet, il doit comprendre qu’il doit laisser le doigt appuyé sur la touche CTRL du clavier pour sélectionner plusieurs éléments. Donc le plugin JQuery Multiselect permet de remplacer un select multiple en une liste de case à cocher, tout bêtement. Mais je trouve cela beaucoup plus efficace d’un point de vue ergonomique !

Pas encore de billet sur le même sujet !