From 73f65c8fbadbdd2098448e77b6d3f0464ad8613e Mon Sep 17 00:00:00 2001
From: Bernhard Posselt
On a le droit à un topo très complet et intéressant, en anglais, de la part de l’équipe de elated sur la sortie de jQuery Mobile 1.3. Je vous le conseille franchement.
-Un énième site pour répertorier les plugins vient de voir le jour. Il a pour mérite d’être plutot bien réalisé et de regrouper plus de 600 plugins. J’espère qu’ils continueront d’alimenter la liste, unheap fait désormais partie de mes sources de plugins. Merci à tous les twittos qui en ont parlé et qui m’ont permis de découvrir ce service.
-Comme souvent, Megaptery a su nous dégoter une jolie petite perle. Tooltipster est un plugin de tooltip très complet et qui permet une énorme personnalisation via CSS. Personnellement, je préfère de loin ce plugin à celui de Twitter Bootstrap.
-C’est tout pour cette semaine, j’espère avoir le temps de bloguer sur d’autres choses cette semaine. Vous pouvez retrouver l’ensemble des liens de cette chronique sur un carnet dédié sur Evernote.
-Dernière petite chose, que pensez vous de cette chronique ? Que voulez vous de différent ? Avez-vous des choses à proposer ? J’aimerais bien avoir vos avis.
-
Article original de MathieuRobin
Aller sur Planète jQuery
Article original de LaFermeDuWeb
Aller sur Planète jQuery
Sortie de la beta 2 de jQuery 2.0 !
-L’annonce a été faite vendredi par Dave Methvin. Bien entendu, le support de IE 6, 7 et 8 a été supprimé. Vous devrez donc faire quelque chose de ce genre si vous souhaitez migrer et continuer de supporter ces navigateurs :
-- - --
Au delà de ça, je vous laisse regarder le lien ci-dessus, trop de détails pour vous les détailler ici et je manque malheureusement de temps. Cette version amène énormément de changements, la migration risque d’être délicate. Le lien contient le changelog complet.
-Autre information officielle, le déroulement de jQuery Europe le 23 et 24 février dernier à Vienne. J’avais raté l’information mais mon amie Anne-Gaëlle Colom m’a permis de rattraper ce manque. Voilà le lien officiel sur l’évènement, vous trouverez un article assez intéressant sur le sujet chez PR Newswire UK.
-L’agence de presse déléguée sur place a partagé ses photos. Dans l’ordre celles du vendredi et celles du samedi. Et celles de Gentics Software le vendredi et le samedi.
-Je n’ai pas eu le temps de me pencher là dessus, mais le weekend dernier, la conférence jQueryTO a eu lieu à Toronto.
-Avant de continuer, je remercie donc Anne-Gaëlle pour toutes ces informations que je n’avais pas pu glaner.
-Un tutoriel imposant côté officiel a été publié et me fait un peu penser aux tutoriels de la KhanAcademy ou encore comme le tutoriel pour GitHub.
-Passons aux plugins, avec une grosse fournée cette semaine. La palme revient à Stéphanie Walter. Son épisode 51 était très riche pour ma propre chronique.
-Hook.js, un plugin pour faire comme une sorte de pull-to-refresh, comme sur Twitter. Ce plugin séduit pas mal en ce moment, il a aussi eu le droit à un article chez La Ferme du Web.
-Toolbar.js, une sorte de barre d’outils, très simple, mais reste efficace.
-Dans les autres outils, on peut compter :
-JSZip, pour zipper et dézipper via JavaScript.
-Edit du 6 mars 2013 : apparemment cette bibliothèque a quelques soucis majeurs, voire le commentaire de check_ca (http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073)
-MetTile, un ensemble de tuiles graphiques pour simuler l’interface de Metro, la dernière UI de Microsoft. Et pour une fois, ce kit est vraiment réussi.
-jQuery.IO, un plugin qui permet de basculer de façon aisée d’un format de données à un autre.
-Encore une fois, les liens de cette chronique sont disponibles sur un carnet Evernote dédié.
-
Article original de MathieuRobin
Aller sur Planète jQuery
-
Le plugin génère des infobulles simples et élégantes dont le style est entièrement personnalisable via CSS (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier à votre convenance.
-Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, title d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre animation qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez modulable.
-On commence par inclure jQuery et le plugin Tooltipster (feuille de style et script JS) que vous pouvez télécharger aussi bien sur le site officiel du plugin que sur GitHub :
-- - - --
On définit une classe CSS (ici tooltip) à appliquer sur les éléments HTML sur lesquels on veut afficher les infobulles. Par défaut, Tooltipster utilise l’attribut title pour remplir la bulle, que ce soit une div, une image ou un lien. A noter que le script nous permet d’utiliser n’importe quelle balise HTML dans l’attribut title. Vous pouvez par exemple insérer des images, à condition de spécifier ses dimensions dans les attributs width et height, ou des balises de formatage de texte.
-- --- -
On termine par activer le plugin jQuery. Pour cela, on appelle Tooltipster sur la classe CSS définie précédemment et votre infobulle est alors fonctionnelle :
--$(document).ready(function() { - $('.tooltip').tooltipster(); -}); --
Le style de vos infobulles peut être facilement changé en modifiant le thème par défaut de Tooltipster qui se trouve dans le fichier tooltipster.css. Vous avez également la possibilité d’ajouter des nouveaux thèmes, très pratique si vous souhaitez en utiliser plusieurs sur votre site). Pour cela, partez de l’exemple et ajouter votre touche personnelle :
--.my-custom-theme { - border-radius: 5px; - border: 2px solid #000; - background: #4c4c4c; - color: #fff; -} - -.my-custom-theme .tooltipster-content { - font-family: Arial, sans-serif; - font-size: 14px; - line-height: 16px; - padding: 8px 10px; -} --
Il vous suffit alors de sélectionner votre thème personnalisé via le paramètre theme comme ceci :
--$('.tooltip').tooltipster({ - theme: '.my-custom-theme' -}); --
Pour conclure, Tooltipster est un plugin jQuery rapide à mettre en place pour afficher des infobulles entièrement customisables.
-Requis : jQuery
-Compatibilité : Firefox, Chrome, Opera, Safari, IE8+
-Démonstration : http://calebjacob.com/tooltipster/
-Licence : MIT
Article original de Megaptery
Aller sur Planète jQuery
Article original de LaFermeDuWeb
Aller sur Planète jQuery
Heureusement pas grand chose à signaler cette semaine, la seule nouvelle qui a retenu mon attention est la sortie de jQuery Mobile 1.3.
-L’annonce publiée mercredi par Todd Parker alors que prévenue lundi à l’origine, mais bon, les gars de l’équipe restent des volontaires, ils font au possible. Rien à redire donc, d’autant que je connais ça aussi.
-L’accent pour cette nouvelle version a notamment été mis sur l’approche du responsive design. Une question récurrente est l’utilisation ou non du pur responsive ou mélanger un site classique et un site mobile. Leur réponse est : les 2. Il semble pratique en effet d’avoir un site consultable partout et un site vraiment dédié à un usage mobile optimisé.
-Au passage, petite info bonne à savoir, ils ont travaillé pas mal donc sur porter en CSS ce qu’il était possible de faire avec au lieu de le faire en JS.
-De nouveaux widgets ont fait leur apparition :
-Le support de IE 10 et Windows Phone 8 vient compléter la liste des choses clés. Evidemment, jQuery 1.9.1 est supporté et ils sont confiants sur le support de la très proche jQuery 2.0. à venir.
-Un évènement facilitant la navigation. Je vous invite à jouer avec $.mobile.navigate.
-Dans les plus petites modifs restant bien pratiques, vous pouvez choisir l’emplacement du bouton de fermeture ou carrément le désactiver. Vous pouvez aussi refuser le clic à l’extérieur comme pouvant fermer les popups, les transformant ainsi en fenêtre modale. Bien pratique à l’occasion.
-Coté sites, vous avez à votre disposition un nouveau site de démonstration et de documentation.
-Attention, alerte au deprecated, les nested listviews sont désormais deprecated, leur support sera supprimé avec la 1.4. Commencez donc à porter votre code si vous voulez pouvoir assurer les mises à jour.
-Vous pouvez accéder au changelog complet et comme d’habitude à mon carnet Evernote partagé dédié.
--
Article original de MathieuRobin
Aller sur Planète jQuery
Article original de LaFermeDuWeb
Aller sur Planète jQuery
→ DIYSlider est disponible sur Github.
Article original de Js4Design
Aller sur Planète jQuery
Côté officiel, on a la sortie de jQuery UI 1.10.1 !
-Comme d’habitude, c’est Scott González qui se colle à l’annonce de cette version de maintenance, la première de la 1.10. Celle-ci n’apporte rien de plus que des correctifs de bogues pour les widgets Accordion, Autocomplete, Datepicker, Dialog, Menu, Slider, Draggable, Position, Effects ainsi qu’au framework CSS.
-Comme d’habitude, le changelog est disponible et le guide de mise à jour a lui aussi été mis à jour.
-Et on a aussi les notes de la dernière réunion de l’équipe de jQuery Mobile. Pas mal d’infos sont donc disponibles pour nous mettre l’eau à la bouche :
-Des trucs sympas en prévision quoi.
-Et pour terminer, un tutoriel assez balaise sur l’usage des objets Deferred et Promise, notamment dans jQuery mais aussi EmberJS. Je le conseille sincèrement à la lecture, c’est un beau morceau.
-Comme d’habitude, les liens ici présents sont disponibles sur un carnet partagé dédié sur Evernote. Pour rappel, pourquoi je partage sur Evernote et comme s’en servir.
-
Article original de MathieuRobin
Aller sur Planète jQuery
Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le plugin jQuery GMAP3, plugin qui facilite grandement l’intégration de Google Maps sur vos sites web et le tout via le Framework jQuery.
-Je vous avais déjà présenté ce plugin jQuery sur d’autres articles du blog, comme sur GMap3 – Plugin jQuery pour API Google Maps 3ème version. Mais GMAP3 a évolué et s’est vu doter d’un nouveau site web depuis.
-Certes, Google facilite déjà beaucoup l’intégration de son API sur les sites web, mais via GMAP3 c’est encore plus simple et surtout avec jQuery.
-En plus de pouvoir utiliser toutes les méthodes natives à l’API fournie par Google, GMAP3 va vous permettre, entre autre, de :
-Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux plugins jQuery.
-L’utilisation de base de ce plugin jQuery :
-Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)
-Le code jQuery pour l’affichage d’une map Google Maps :
-La balise div d’accueil de la map :
-Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :
-Vous l’aurez compris, c’est simple, vous avez une page de démo via ce lien afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.
-Site officiel du plugin jQuery GMAP3 : http://gmap3.net
-Documentation GMAP3
-Téléchargement GMAP3
Articles qui peuvent vous intéresser :
-
- scrolling="no" frameborder="0"
- style="border:none; width:540px; height:50px">
Article original de LudiKreation
Aller sur Planète jQuery
Article original de LaFermeDuWeb
Aller sur Planète jQuery
Il est vrai que la question est délicate mais certains critères sont simples et permettent de faire un énorme tri. Je vous en expose quelques uns ici, non triés, vous pouvez y conférer l’importance qui vous convient.
-Critère n°1 : l’activité du plugin
-Quand vous utilisez un logiciel, c’est comme lorsque vous utilisez une voiture ou, mieux, un ascenseur. En général, vous appréciez que quelqu’un soit capable de vous aider. Si possible un vrai expert de la technologie concernée qui peut réellement agir efficacement.
-Un plugin, comme tout logiciel, doit encore être maintenu. En une phrase : je vous laisse à votre imagination pour un ascenseur non maintenu.
-Critère n°2 : Responsive design
-De mémoire, les premières publications concernant un design web dynamiquement adaptatif pour les mobiles datent de novembre 2009 (Mobile First). C’était il y a un peu moins de 4 ans. Comme l’a très bien affirmé Kevin Schaaf de Enyo à dotJS : »l’heure est venue d’arrêter de se demander si ça sera responsive ou non. Ça doit l’être, c’est tout« .
-Le responsive design ne fait pas tout. Je ne sais quoi penser de la polémique à propos du sacrifice des sites mobiles dédiés au profit d’un unique site responsive. Il y a toute une question d’impact sur le SEO. Quoi qu’il en soit, que vous ayez un site mobile ou non, votre site doit être responsive.
-D’ailleurs une version responsive de ce blog est en cours de développement. L’API de WordPress est juste infâme.
Critère n°3 : les tests
-On reste dans la métaphore ascensionnelle avec l’ascenseur qui sera plus parlante que la voiture. Sincèrement, vous monteriez dans un ascenseur en sachant pertinemment que son constructeur/installateur n’a fait aucun test hormis ceux à la conception en usine ?
-Critère n°4 : la documentation
-Pour le coup, changement de métaphore. Vous aimez bien monté les meubles d’un certain fabricant suédois sans plans ?
-Critère n°5 : l’accès aux sources
-Arrêtons de charger des plugins à droite à gauche sur des sites dédiés plus ou moins bien référencés. GitHub existe, BitBucket aussi, le partage de code est facile, simple et plus qu’efficace. Un développeur qui garde pour lui son code ne mérite plus à l’heure actuelle qu’on utilise son travail. Et accessoirement, c’est surtout une question de performances et de qualité de code. Le fait de pouvoir plancher à plusieurs sur un problème peut beaucoup aider en général.
-Des annuaires de qualité existent, je pense par exemple au site officiel fraîchement refait. Ou à jQuery Rain. Ou encore des testeurs en chaîne tels que l’ami Megaptery ou encore Js4Design. Il est rare que je cherche un plugin ailleurs que sur ces deux derniers sites pour une utilisation intensive professionnelle.
-Critère n°6 : le prix
-La gratuité d’un soft, c’est très bien. Mais ça ne fait pas tout. Des sites comme CodeCanyon, proposent d’excellentes ressources payantes. Mais parfois, il revient moins cher d’acheter un plugin très bien réalisé quelques $/€ plutôt que de passer plusieurs heures à déboguer/adapter un plugin trouver gratuitement.
-Critère n°7 : la compatibilité
-Je ne vous ferai pas l’affront de réclamer que vos plugins soient compatibles IE 6 ou Netscape, mais sur tous les navigateurs de moins de 5 ans d’age, ce n’est pas trop demander, surtout quand on s’appuie sur jQuery qui se charge de l’essentiel.
-Conclusion
-Ce sont des règles d’or pour moi, mes plugins ne les respectent pas toutes, j’y travaille. Cependant elles peuvent vous éviter un paquet de soucis.
-
Article original de MathieuRobin
Aller sur Planète jQuery
Du côté de l’officiel, on a la mise à disposition du premier patch jQuery 1.9.1 !
-Essentiellement des correctifs de bogues et de régressions, je vous laisse lire le changelog et le guide de migration sur l’annonce officielle.
-Du côté de jQuery Mobile, on a la RC1 de la 1.3 qui est sorti. L’annonce officielle est disponible ici. Des petites nouveautés sympathiques sont incluses. Il y a notamment les panels qui m’ont l’air pas mal.
-Autre chose que j’attendais depuis longtemps, une mise à jour de QUnit vers la 1.11. La modification clé qui m’importe est l’affichage du temps d’exécution par test. Celle-ci permettant donc de profiler un peu mieux l’exécution de vos applications.
-Côté non-officiel, je vous incite à jeter un oeil à tout ça :
-Je sors le tutoriel suivant de la pile ci-dessus parce qu’il est vraiment important et clé pour comprendre la mécanique interne de jQuery. « Do You Know When You Are Looping in jQuery? » explique la logique des boucles de jQuery. La compréhension des explications qui y sont dispensées sont clés pour une amélioration plus que significative des performances de vos applications.
-Comme d’habitude, les ressources de cette chronique sont disponibles dans un carnet partagé dédié sur Evernote.
-Bonne semaine à tous, et normalement à la semaine prochaine pour la chronique et dans le courant de la semaine pour d’autres publications.
-
Article original de MathieuRobin
Aller sur Planète jQuery
-
App Folders est un plugin jQuery dédié aux smartphones qui imite le comportement des dossiers de l’interface iOS : lorsqu’on clique sur un dossier, les fichiers qui s’y trouvent s’affichent alors dans un volet coulissant. Ici, les « fichiers » sont des éléments HTML (images, textes, vidéos, etc) et les « dossiers » sont liés à des URL. Le script fonctionne sur tous les écrans (responsive) et peut être facilement customisé.
- - -Les fonctions Easing (easeOutElastic, easeInQuint, etc) permettent de préciser la vitesse d’exécution d’une animation pour la rendre plus réaliste. En effet, dans la réalité un objet ne commence pas son mouvement instantanément et à vitesse constante : il subit une accélération et une décélaration. Voici un site qui partage le code de plusieurs fonctions Easing en trois langages : JavaScript (via le plugin jQuery Easing), SASS et CSS3 (courbes de Bézier).
- - -Piecon est une petite librairie JavaScript permettant de modifier à la volée le favicon d’une page afin de montrer un graphique de progression (pie chart) ou de modifier son title afin d’afficher un pourcentage de progression. Cela peut être utile dans le cas d’un upload de fichier : l’utilisateur peut continuer à naviguer et jeter un coup d’œil à l’onglet qui indique l’avancement de la mise en ligne.
- - -Motio est un plugin jQuery spécialisé dans l’animation de sprites CSS, conçu aussi bien pour faire défiler un décor que pour mettre en mouvement un personnage. Plusieurs options sont configurables : sens de l’animation (vertical ou horizontal), mise en pause, nombre de FPS (images par seconde), vitesse de défilement, etc.
- - -Gemicon est un pack gratuit de plus de 600 icônes au format PNG et disponibles en plusieurs tailles (16×16, 32×32, 64×64). Le pack contient également les images vectorisées au format PSD, donc redimensionnables sans perte de qualité. Le set peut être utilisé aussi bien pour un usage personnel que pour un projet commercial.
- - -PlaceIt est un outil vous permettant de générer en quelques secondes des captures d’écran réalistes via un simple drag-and-drop : il insère l’image dans le support de votre choix (iPad, iPhone, Android, etc) et applique automatiquement les reflets et les inclinaisons pour un rendu réaliste et contextuel de votre capture d’écran. Vous pouvez voir un exemple d’utilisation sur la couverture de la page Facebook Megaptery.
- - -Flipping Circle Slideshow est un mini slideshow circulaire développé avec jQuery par l’équipe de Codrops. Il s’agit d’un concept expérimental : l’idée est de retourner la slide dans le cercle (flip) avec un angle spécifique selon l’endroit où vous cliquez. L’effet est plutôt réussi.
- - -Bootsnipp est une collection de snippets (HTML/CSS, JS) et éléments graphiques qui viennent compléter le framework Bootstrap développé par Twitter. Vous retrouverez tout un tas d’interfaces externes au framework prêtes à l’utilisation : formulaires, barres de navigation, sliders, graphiques… mais aussi des cas très spécifiques (fenêtre de tweet, interface Gmail, etc). Bref, c’est assez varié. Un petit copier-coller et le tour est joué.
- - -One% CSS Grid est un framework CSS responsive basé sur un système à 12 colonnes avec deux résolutions de départ (1024px et 1280px). Léger et facile en prendre en main, l’outil est compatible avec tous les terminaux mobiles et propose également une grille pour le logiciel Photoshop.
- - -Basé sur HTML5, PlayThru est une bonne alternative au célèbre Recaptcha de Google. En effet, ce service remplace le captcha traditionnel par un petit jeu interactif et ludique : une consigne vous décrit les opérations à effectuer (manipulation d’objets via la souris ou le tacticle) pour être considérer comme un être humain, par exemple garer des voitures, poser des canettes dans une glacière… etc. Plutôt original ! Compatible avec tous les navigateurs récents.
- - -Similaire à Zoomy, Snipe est un plugin jQuery qui permet de mettre en place un effet de loupe sur vos images au survolement de la souris. Pour cela, il est nécessaire de fournir deux images au script, l’image normale et l’image zoomée, ce qui donne la possibilité de jouer sur leurs différences (par exemple avec la couleur). Le style CSS de la loupe est totalement personnalisable.
- -
Article original de Megaptery
Aller sur Planète jQuery
Avec Simple HTML DOM, il est possible de :
-Ainsi, pour rechercher tous les articles présents sur une page, il suffit de quelques lignes, comme par exemple :
-// Create DOM from URL - $html = file_get_html('http://slashdot.org/'); -// Find all article blocks - foreach($html->find('div.article') as $article) { - $item['title'] = $article->find('div.title', 0) ->plaintext; - $item['intro'] = $article->find('div.intro', 0) ->plaintext; - $item['details'] = $article->find('div.details', 0)->plaintext; - $articles[] = $item; - } -print_r($articles);-
Le site propose de nombreux exemples d’utilisation. Toutefois, vous trouverez chez David Walsh un exemple complet pour vérifier si des pages web on été modifiées et vous envoyer un mail le cas échéant.
-→ Simple HTML DOM est sur Sourgeforge.
-Voir aussi phpQuery pour sélectionner les éléments du DOM côté serveur (via @c2c)
Article original de Js4Design
Aller sur Planète jQuery
-J’utilise un plugin qui fait appel à $.browser et il n’est pas compatible jQuery 1.9, que faire ?
Vous pouvez inclure entre l’appel de jQuery et l’appel du plugin, un des deux fichiers suivants :
- -Vous pourrez à présent utiliser votre plugin avec jQuery 1.9.
-
Article original de Chez Syl
Aller sur Planète jQuery
Voir mon post récapitulatif des chang