Planète jQuery
Planète jQuery Francophone - L'actualité jQuery en français
  • Accueil
  • Top 10
  • Statistiques
  • Inscription
  • Archives
  • Contact

Informations

Planète jQuery est un site visant à regrouper un ensemble de flux RSS de divers sites/blogs parlant de jQuery en français.

N'hésitez pas à nous rejoindre, plus on est de fous plus on jQuery !

Abonnement

Abonnez vous au flux RSS Suivez nous sur twitter

Participer

  • meta Ajouter votre blog

Membres

  • feed  Arnaud-k
  • feed  Babylon-design
  • feed  Berejeb
  • feed  Creatiqfr
  • feed  Creativejuiz
  • feed  Css4Design
  • feed  Damdec
  • feed  Dator
  • feed  Devload
  • feed  Devzonefr
  • feed  Jarodxxx
  • feed  jQuery.info
  • feed  Js4Design
  • feed  Kennyfeed
  • feed  LaFermeDuWeb
  • feed  Landier
  • feed  Les integristes
  • feed  LudiKreation
  • feed  MathieuRobin
  • feed  Megaptery
  • feed  Molokoloco
  • feed  Noviuslabs
  • feed  Prélude
Filtrer les articles :     Articles du jour   -   Articles de la semaine   -   Articles du mois   -   Tous les articles
Scrollorama rend la navigation plus fun 
0 vote
Par LaFermeDuWeb le 26/01/2012 à 09:53
Scrollorama est un plugin jQuery qui permet de rendre le scrolling vertical bien plus fun en utilisant du CSS3.
Haut de page
Hebdo jQuery, épisode 59 
1 vote
Par MathieuRobin le 23/01/2012 à 13:49

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 !

Haut de page
HTML KickStart - Bien démarrer vos sites web HTML/CSS/jQuery 
0 vote
Par LaFermeDuWeb le 23/01/2012 à 09:14
HTML KickStart est un framework bootstrap HTML / CSS / jQuery permettant de bien démarrer dans la création de pages web.
Haut de page
Chosen - Des select box plus sexy et riches avec jQuery 
1 vote
Par LaFermeDuWeb le 20/01/2012 à 09:38
Chosen est un script JS permettant de transformer vos select boxes en select plus riches et ergonomiques.
Haut de page
Chocolat – plugin jQuery – La visionneuse d’image pratique 
0 vote
Par LudiKreation le 19/01/2012 à 16:24

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.

chocolat-jquery-plugin-images

Utilisation du plugin :

Appel des librairies et fichiers js / css :

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.chocolat.js"></script>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">

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

<a href="series/1.jpg" rel="Titre de la série" title="Légende de l'image 1"><img width="100" src="series/mini/1.jpg" /></a>
<a href="series/2.jpg" title="Légende de l'image 2"><img width="100" src="series/mini/2.jpg" /></a>
<a href="series/3.jpg" title="Légende de l'image 3"><img width="100" src="series/mini/3.jpg"/></a>

Puis la mise en marche du plugin :

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
    $(function() {
        $('a').Chocolat();
    });
});
</script>

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 :

container :
Définit si l'interface chocolat va s'ouvrir et occuper toute la page (par defaut), ou si elle doit s'ouvrir dans un bloc particulier de la page. (facultatif)

displayAsALink :
Permet de regrouper les images sous un seul lien (true) ou de laisser le html tel quel (pour laisser des miniatures apparentes par exemple) (false : par defaut). (facultatif)

linkImages :
Définit si l'on peut passer d'une image à l'autre sans fermer la visionneuse (true : par defaut), ou si les images restent indépendantes. (facultatif)

overlayOpacity, overlayColor :
Permettent de définir l'opacité et la couleur du fond. (facultatif)

linksContainer :
Permet de définir l'élément qui contiendra le lien vers la série si displayAsALink vaut true (facultatif).

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

Haut de page
Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur 
0 vote
Par Css4Design le 17/01/2012 à 20:42

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)

flattr this!

Haut de page
59ème épisode des chroniques jQuery 
1 vote
Par MathieuRobin le 17/01/2012 à 09:23

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

Haut de page
jQuery UI Button : buttonset de radio/checkbox avec seulement des icônes 
1 vote
Par Noviuslabs le 09/01/2012 à 17:46

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)

Si vous lisez attentivement la documentation et les exemples du widget Button de jQuery UI, vous saurez très facilement créer un buttonset à partir d'une liste d'inputs radio ou checkbox. Techniquement, le widget récupère les LABEL associés aux INPUT pour créer les BUTTONS. L'avantage de passer par des radio ou des checkbox est que le widget gère l'état on / off du boutton en fonction de l'attribut checked de l'INPUT.

Dans un autre exemple, vous apprenez à créer des bouttons avec un ou deux icônes, avec ou sans texte.

Oui, mais vous ce que vous voulez, c'est un groupe de boutons basés sur des radio ou des checkbox ET représentés seulement par des icônes. Et là, pas d'exemple disponible.

J'ai d'abord essayé de mettre les icônes directement dans les LABEL, via un tag IMG ou via un SPAN avec la classe CSS ui-icon. Mais, le résultat n'était pas convainquant : les boutons étaient plus gros qu'à la normale.

J'ai essayé de simuler l'effet radio (ou checkbox) avec un boutton classique et en forçant la classe CSS ui-state-active sur le bouton actif. Mais, le widget, dans les cas non radio ou checkbox, enlève la classe ui-state-active sur le mouseout.

J'ai donc mis le nez dans le code du widget pour voir comment il marchait. C'est du bel ouvrage !! Dans la partie spécifique aux buttonset, j'ai remarqué que le widget cherchait tous les :button, :submit, :reset, :checkbox, :radio, a, :data(button) contenus dans l'élément englobant. Ensuite, pour chacun, il vérifiait s'il avait déjà été transformé en ui-button. Si oui, il le rafraichissait, si non, il l'initialisait. BINGO !

La voilà ma solution : d'abord initialiser un à un mes inputs radio en passant les bons paramètres et seulement ensuite initialiser le buttonset.

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

Et le résultat (vous pouvez faire joujou avec sur JSBin).

Vous pourrez également voir le résultat en live d'ici quelques jours / heures dans la démo de Novius OS, application Médiathèque.

Haut de page
Chroniques jQuery, épisode 58 
1 vote
Par MathieuRobin le 09/01/2012 à 09:11

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.

Haut de page
CraftMap - Convertir des images en cartes interactives avec jQuery 
0 vote
Par LaFermeDuWeb le 05/01/2012 à 09:39
CraftMap est un plugin jQuery permettant de créer des cartes interactives à partir d'une simple image.
Haut de page
Page suivante »
Propulsé par le BilboPlanet Retour au début