Salut à tous, j’espère que vous passez un bon nouvel an chinois ! Pas grand chose à se mettre sous la dent, ceci dit, on tape dans le qualitatif pour ce qu’il y a à dire.

Je commencerai par vous reparler de jQuery UI Bootstrap. Le framework de dev, basé sur Twitter Bootstrap pour le design et sur jQuery UI pour le côté JS. Il est actuellement disponible en version 0.2. Merci à Addy Osmani pour son énorme travail à ce sujet.

Autre « mise à jour », Mirko Tebaldi a mis à jour sa version PDF de la doc de jQuery. Vous pouvez la récupérer ici.

Sinon, côté plugins, il y en a deux qui m’ont botté cette semaine.

Le premier, chez les copains de BowJay qui continuent sur la lancée avec un plugin de slideshow assez sympa.

L’autre, je l’ai découvert via LaFermeDuWeb. Chosen vous permet de styliser vos listes de sélection (et ça a de la gueule).

Un fasicule de type « cheat sheet » a été publié par l‘équipe de Woorkup concernant jQuery 1.7.

Pour finir, un nouveau livre a rejoint la grande bibliothèque de jQuery. Editions Eyrolles, un tome intitulé JQuery Mobile : La bibliothèque JavaScript pour le Web mobile. Il est plutôt épais, puisqu’il compte un peu plus de 600 pages. Si j’ai l’occasion de le lire, je vous en ferais une critique bien entendu.

Voilà, c’est tout pour cette semaine !

Je reviens de nouveau avec un plugin jQuery. Cette fois, c’est une réalisation française : Chocolat. Chocolat permet de visualiser une à plusieurs images sans quitter la page de votre site web. Le plugin jQuery laisse à l’utilisateur le choix de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. Cette visionneuse peut apparaitre soit en pleine page, soit dans un bloc de la page.

Utilisation du plugin :

Appel des librairies et fichiers js / css :

Création des éléments html qui seront touchés par le plugin :

Puis la mise en marche du plugin :

Puis vous aurez tous vos liens qui seront affectés par le plugin jQuery Chocolat, au clic vous pourrez visionner vos images sans avoir à changer de page.

Il existe plusieurs options :

Pour plus d’information sur ce plugin, rendez vous sur la page officiel de Chocolat
Pour visualiser une démo, c’est par là

Articles qui peuvent vous intéresser :

• Chocolat – plugin jQuery – La visionneuse d’image pratique
• s3Slider – Plugin jQuery – Un slider simple pour vos sites web
• jCoverflip – Plugin jQuery – Le Coverflow simple et efficace
• GMap3 – Plugin jQuery pour API Google Maps 3ème version
• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

 
<?php 
    $more_strings = array( 
        "Read More...", 
        "Keep on Reading...", 
        "Wait! There's more...", 
        "Read the rest of the article..."
    );
?> 
<?php 
    the_content($more_strings[rand(0,count($more_strings))]); 
?> 

Liens intégration web

Organisation, compression, vos CSS vont adorer !

• cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
• Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
• dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
• Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
• Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
• pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
• drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — Création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter"> 
    <div> Left content goes here </div> 
    <div> Right content goes here </div> 
</div> 

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){ 
    $("#MySplitter").splitter(); 
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

• 390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

• Blueprint 0.8 (via Christian Montoya),
• récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
• Kit de survie du créatif oeuvrant dans les métiers du graphisme,
• Les coulisses d’un design par Douglas Bowman,
• Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

Avec un peu de retard, voilà le 59ème. On commence direct avec les annonces officielles :

jQuery UI 1.8.17 est disponible !

Bon vous l’aurez compris au numéro de version, c’est juste une mineure. Dans le ventre, elle corrige des problèmes du widget Accordion, Autocomplete, Button, Datepicker, Droppable, Position, Progressbar, Selectable, Sortable et Tabs plus quelques bidouilles du côté des CSS. Rien de formidable en soit mais la consolidation est toujours nécessaire. Comme presque toujours, c’est Scott González qui a fait l’annonce et comme d’habitude vous y trouverez le changelog complet.

Todd Parker a publié à propos d’une très prochaine version de jQuery Mobile du genre 1.0.1. En soit, pareil, une version mineure donc des corrections. Mais cela prépare surtout l’arrivée de la 1.1 sur laquelle ils travaillent à fond. Et on a eu le droit à un aperçu. Il y aura donc :

• support de l’AMD, c’est à dire du chargement dynamique des modules, pratique pour éviter de tout charger comme des boeufs dès le début ;
• « true fixed toolbars« , le point qui leur pose le plus de soucis. Mettre en place des zones de boutons/infos comme dans les vraies applis relève plus du défi psychologique et de la mise à l’épreuve de la patience/détermination. D’un point de vue technique, c’est le bordel dû à la différence entre chaque terminal ;
• transitions ajax améliorées, les transitions sont souvent un peu brutales, le but est de les rendre plus souples (« smooth » en anglais).

Et forcément, plein d’entrain, il a même parlé de la 1.2 avec l’arrivée de nouveaux widgets dont possiblement une popup. Oui, le mot maudit qu’on a renommé pour faire plus sympa popin, lightbox ou encore modalbox quand on en revient aux logiciels lourds. Donc ça ça arrivera aussi bientôt sur jQuery Mobile. Au cas où ça vous dirait de voir ce que ça donne, voilà une démo.

Dernier point sur jQuery Mobile, Todd Parker a également appelé à présenter vos cas d’utilisations si vous avez un exemple de transitions qui rame bien, histoire d’avoir une base de travail pour les prochaines optimisations.

D’ailleurs en parlant de mobile, il y a jQ.Mobi qui vient de débarquer sur le marché, encore en beta d’ailleurs. Je n’ai pas du tout eu le temps de regarder ce que ça fait mais ça a l’air joli et relativement réactif. Oui, dès fois, c’est bien aussi ce genre de choses.

Je rappelais l’autre jour l’importance de n’utiliser jQuery que quand strictement nécessaire, pour des questions de performances. Un développeur du nom de Richard Bradshaw a fait une démo très simple pour montrer qu’il en va de même entre les transitions CSS et celles proposées via jQuery.

Je vous propose de finir sur le « LOL » de la semaine, avec un mec qui en direct d’un exam demande un coup de main pour jQuery. D’ailleurs comme dit dans les commentaires, si il avait suivi un minimum en cours, ça il aurait su faire.

A la semaine prochaine pour la chronique et à demain à priori pour un nouveau billet

Voici un petit billet pour faire profiter d'une astuce pour le widget jQuery UI Button : créer un buttonset (regroupement de boutons comme sur l'image illustrant ce billet) basé sur des inputs radio (ou checkbox)

//En partant du principe que le suffixe de l'icône à afficher est contenu dans la valeur de chaque radio

// On cherche tous les radio contenu dans un élément servant de container au groupement de boutons
$('#buttonset').find(':radio')

// Boucle sur les radios
.each(function() {
    var input = $(this);
    // Initialisation du bouton : 1 icône mais le label non affiché
    input.button({
        text : false,
        icons : {
             primary: 'ui-icon ui-icon-' + input.val()
        }
    });
})

// On revient au groupement de boutons et on l'initialise
.end()
.buttonset();

Les fêtes ne sont visiblement pas finies pour tout le monde. Très faible activité du côté officiel, heureusement, la communauté, elle, a déjà repris du service. On commence du côté du core de jQuery. Avec rien à dire. Enfin si, juste une petite astuce en rappel de la part de mon ami Olivier Pons. Qui nous rappelle comment faire pour appeler une seule fois une fonction lors d’un évènement.

On attaque donc directement avec un super tutoriel vidéo réalisé par les gars de Grafikart concernant le composant DatePicker de jQuery UI. Comme d’habitude, ils présentent très bien les choses, ils sont exhaustifs, prennent le temps d’expliquer chaque point et font un bon tour de la question. Continuez les gars, c’est cool ce que vous faites !

Le site DesignModo a publié une liste de plus de 35 animations diverses réalisées avec jQuery. Pas mal sont assez impressionnantes ou sympas. Mais n’oubliez pas face à ce type de listings que régulièrement l’usage de JavaScript est inutile pour faire des animations. CSS est là pour ça aussi et c’est plus son rôle que celui de JS.

Tout comme il faut au possible préférer l’usage du JavaScript face à l’usage de jQuery ou de n’importe quelle autre librairie. Les librairies sont là pour vous aider face à des tâches ardues, pas des tâches simplistes. Les gars de BowJay nous montrent bien le gain en présentant comment insérer un grand nombre de données efficacement dans un document.

Marcin Dziewulski a publié un plugin, nommé CraftMap, qui permet de gérer des cartes interactives à partir d’une image. Je vous laisse jouer avec la démo la plus parlante.

Du côté de jQuery Mobile, Todd Parker a lâché quelques infos concernant la version 1.1 à venir. Ils ont notamment travailler sur une en-tête et un pied de page soit « fixed », soit « absolute » ou encore « always visible ». Ils existent déjà les « toolbars », l’idée est donc de les améliorer.

Avant de conclure, des nouvelles du groupe jQuery Standards. Ils travaillent sur un proposition qui vise à créer un évènement nommé « ontransitionstart », par équité avec le fait qu’il existe un évènement « ontransitionend ». Je ne peux que appuyer cette démarche, il y a bien des designers qui arriveront à trouver une utilité réelle à un tel évènement

Pour terminer, sachez que le blogueur Jarodxxx a créé un forum francophone dédié à jQuery. Dans les inscrits, j’ai déjà reconnu quelques noms. Puisse ce forum apporter de bonnes choses à la communauté. Pour rappel, j’interviens régulièrement déjà (et je ne suis pas le seul) sur le forum Developpez.com, essentiellement dans les rubriques JavaScript/jQuery et PHP.