background preloader

Anamo

Facebook Twitter

Les objectifs de la communication. 7 Techniques de référencement avancé peu connues. Test utilisateur.

Référencement

Comment développer un plugin jQuery. jQuery est la plus populaire des bibliothèques JavaScript, de nombreux sites l’ont adopté pour ses effets dynamiques et ses fonctions AJAX [NdT : Microsoft et Nokia l’ont intégré à leurs outils de développement]. Toutefois, relativement peu de développeurs poussent jusqu’à développer des plug-ins. Dans ce tutoriel, nous allons découvrir les bases de la création de plug-in à l’aide d’un exemple simple. Notre code aura pour effet d’intervertir les lettres dans un ou plusieurs nœuds (éléments) choisis - page de démonstration. Pourquoi créer un plug-in jQuery ? En un mot : la réutilisation. En étendant jQuery, vous créez des composants réutilisables qui peuvent être mis en œuvre sur n’importe quelle page web. Votre code est encapsulé et il y a ainsi moins de risques que vous utilisiez par ailleurs le même nom de fonction [NdT : la nouvelle fonction remplacerait alors l’ancienne].

Comment jQuery fonctionne // Colore tous les tags <p> en rouge $("p").css("color", "red"); Déclarer le plug-in <! Développez votre propre plug-in jQuery ! La fonction jQuery.fn Avant de s'attaquer à quelque chose de complexe, commençons par voir les bases : comment ajouter un plug-in à jQuery Nous allons nous baser sur la fonction jQuery.fn.

Celle-ci est en quelque sorte la fonction mère de jQuery. C'est elle qui nous permet d'écrire $('#element').show() , $('#element').fadeTo() etc... Et c'est donc elle qui nous permettra d'écrire notre plug-in. Mais comment ? La première étend notre fonction jQuery.fn avec une notation JSON contenant notre plug-in.

jQuery.extend(jQuery.fn, notreSuperPlugIn: function(parametres) //Code de notre plug-in ici secondPlugIn: function(parametres) //Code du second plug-in ici Cette pratique est cependant déconseillée : il est préférable de n'avoir qu'un plug-in par fichier, c'est plus propre, plus facile à maintenir, ça fait des fichiers moins gros... jQuery.fn.notreSuperPlugIn=function(parametres) Enfermons notre plug-in ! (function($) $.fn.notreSuperPlugIn=function(parametres) })(jQuery); ! $('p').notreSuperPlugIn(); ... Écrire ses propres plugins avec jQuery. Pour ce premier article de 2014, je vais aborder un outil que n’importe quel développeur web ou intégrateur a déjà dû utiliser. Je veux parler de jQuery.

En effet, jQuery est présent sur une très grande majorité de sites Web, il est présent par défaut dans des frameworks comme Ruby on Rails et possède une très importante base de plugins et d’utilisateurs. Avant de commencer Il existe une controverse concernant l’utilisation inconditionnelle de jQuery et le fait que cette dernière tend à favoriser l’ignorance de JavaScript. C’est à dire que beaucoup de développeurs ne connaissent que jQuery pour tout ce qui concerne le DOM, la propagation d’événements, la sélection d’éléments, les manipulation de propriétés, etc. Attention, l’article est rédigé par une ce des personnes. Partager et réutiliser Il m’arrive souvent d’avoir à intégrer du code fourni par un intégrateur. Oui, mais non ! Un plugin jQuery vu de l’extérieur Voilà comment s’utilisent une majorité des plugins jQuery : jQuery et pas $ Iabsis - Tuto : Création d'un plugin jQuery - Un cas concret. Introduction Le web d'aujourd'hui est de plus en plus friand de contenus dynamiques et d'effets en tout genre.

Il est dès lors très important d'apprendre à créer des contenus interactifs et pour ce faire, le mieux est d'apprendre à utiliser les frameworks tel que jQuery ou mootools pour ne citer qu'eux. Dans ce tutoriel, nous allons nous intéresser à la création de plugins jQuery. Ressources utilisées Avant de commencer, on va présenter les différentes sources qu'on va utiliser pour commencer notre projet. Il nous faut donc les librairies suivantes : Twitter bootstrap (non obligatoire) mais cela va nous permettre de commencer rapidement notre projet sans avoir à s’embarrasser de toute la partie design.

Note: Maintenant que toutes les librairies ont été présentées, j'ai créé une archive pour vous permettre de récupérer le point de départ de notre projet que vous pouvez télécharger ici même : Archive du projet initial Présentation du projet Ce que nous allons développer Les fonctions "callback" jQuery plugins. 10 exemples incroyables d’effets de survol en jQuery / CSS3. Accueil > Inspiration Design > jQuery / CSS3 / HTML > 10 exemples incroyables d’effets de survol en jQuery / CSS3 mercredi 2 avril 2014, par Wonka Trouvez ici toute la puissance de jQuery couplé avec CSS3 pour la création d’animation et d’effets de survol pour le webdesigns. Le développement de site internet notamment du front end passe aujourd’hui exclusivement via l’élaboration d’une expérience utilisateur adaptée et optimisée.

Pour rendre cette expérience toujours plus dynamique et attractive le JS et notamment ces frameworks comme jQuery sont apparu. D’années en années les effets sont de plus en plus sophistiquées permis grâce notamment à l’évolution des navigateurs (et donc par la force de choses des langages comme le CSS3). Je suis toujours étonnée lorsque je vois certains effets réalisés par des intégrateurs, et surtout les effets de survols et de clicks.

Voici une petite sélection des plus beaux effets que j’ai vu sur internet ces dernières semaines. Effet d’expension Boutons évolués. 35 plugins jQuery gratuits pour rendre votre site incroyable | Design Spartan : Art digital, digital painting, webdesign, ressources, tutoriels, inspiration. Le nombre de plugins jQuery disponibles est devenu incroyable et les possibilités qu’ils offrent pour rendre votre site toujours plus interactif et intéressant sont sans limites. Voici donc une collection de 35 plugins incontournables triés sur le volet ! Basés sur la librairie Javascript jQuery, largement adoptée par la communauté des développeurs et créateurs de sites, ces plugins permettent l’intégration facile et rapide de fonctionnalités puissantes.

Certains sont très pratiques pour des taches précises (par exemple la création de tags ou des animations de tri) et d’autres sont si puissants qu’ils seront les fondations de votre site (effets de scrolling, navigation, mise en page, effets d’animation, etc). En bref, vous avez tout ce qu’il vous faut pour rendre votre site incroyable et éblouir vos clients et visiteurs en un temps minimal. ScrollMagic : plugin impressionnant offrant plein d’effets de scroll ( Demo | Download ) TaggingJS : pour créer vos tags facilement ( Demo | Download )

Unslider — the super-tiny jQuery slider. 50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant. Cela fait quelques années que le Javascript et notamment jQuery – qui simplifie et norme son utilisation – continuent d’être de plus en plus utilisés. Aujourd’hui cette technologie est toujours plus facile à exploiter grâce à l’installation de plugins, c’est-à-dire de petits modules de code. Il n’a jamais été aussi facile qu’aujourd’hui de rendre un site ergonomique, originale et attractif ! Ces 50 plugins sélectionnés avec soin parmi les milliers existants vous permettront de transformer n’importe quel site fade en site riche, intuitif, interactif et ergonomique, y compris sur mobile. Leur mise en place est en général très simple.

Selon le plugin et ses capacités son utilisation et les réglages varient de très faciles à plus avancé pour les connaisseurs. Plugins pour réaliser des sites avec effets de scroll et/ou de la parallax Parallax.js Parallax.js Pour créer des sites à parallax verticale facilement : One Page Scroll Parallax.js Fullpage.js Skrollr Cool Kitten jQuery Scroll Path ScrollUp via. Webdesigner Trends - Webdesign et inspiration.