Webdesign : Javascript et jQuery, explications et liens
Le webdesign évolue aussi vite qu’Internet lui-même et les tendances et nouveautés se succèdent. Aujourd’hui, on entend beaucoup parler de l’emploi de Javascript, AJAX, jQuery ou autre technologie. Faisons le point dessus avant de vous donner quelques liens à ne pas louper pour vous faciliter la vie !
C’est quoi du Javascript ?
Rien à voir avec une danse, il s’agit d’un langage de scripts qui est écrit dans le code de nos pages web pour ensuite être exécuté par notre navigateur.
« Ok, mais j’ai rien compris ! » Pour faire simple, ce langage qui découle du Java, permet d’offrir une nouvelle expérience aux utilisateurs d’un site web : effets de transition, de navigation, gain de place, animations, les options sont sans limite. Disons pour faire simple qu’en employant du Javascript, on peut recréer pas mal d’animations ou de spécificités d’un site web en Flash.
« Cool, tu es trop fort, j’ai à peu près compris ce que c’était. Mais t’as p’tet des exemples pour y voir plus clair ? » Oui c’est vrai, je suis trop fort. (…) Les exemples se multiplient d’eux-mêmes sur le web car l’utilisation de Javascript est de plus en plus populaire car ses différentes applications sont très prisées. En voici quelques exemples :
– l’agrandissement des images dans un article sur Design Spartan est géré par un plugin jQuery (expliqué plus bas)
– le bloc à onglets de droite est géré lui aussi en Javascript sur Komodo Media
– Toujours sur Komodo Media, autre exemple original (et inutile) de Javascript : le « Foliage-o-meter » sous le bloc à onglets : cette barre horizontale permet de changer la densité du feuillage présent sur le site !
Alors, maintenant, jQuery, t’expliques ?
Javascript, aussi gentil qu’il est, ne réagit pas de la même façon sur tous les navigateurs et son apprentissage n’est pas vraiment des plus faciles. C’est là qu’intervient jQuery : c’est un framework (ou « cadre de développement ») qui permet de faire gagner du temps aux développeurs. Pour obtenir un même effet, on écrit beaucoup moins de code, plus simple, et on a la garantie que cela s’exécute de la même façon sur tous les navigateurs.
Pour faire très simple, c’est comme Javascript, mais en plus léger et plus facile. C’est donc un fichier Javascript, aussi appelé « librairie » qu’on utilise pour coder plus vite et différemment. Pour l’utiliser il suffit d’ajouter une ligne de script dans l’en-tête de sa page HTML qui va en fait indiquer la source de la librairie jQuery :
<script type=« text/javascript » src=« http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js »></script>
Un des gros atouts pour la majorité des webdesigners est l’emploi de ses plugins. Aucune connaissance en Javascript ou même en jQuery n’est nécessaire la plupart du temps (même si ça aide !) pour ajouter de superbes effets ou fonctionnalités à son site ! Dans l’en-tête HTML, là on ajoute la librarie jQuery, on ajoute de la même façon le chemin du fichier Javascript du plugin. Je ne rentre pas dans les détails, d’ailleurs si vous voulez en savoir plus sur Javascript et son pote jQuery, je vous invite à lire l’article expliqué avec humour de Geekeries.
Vous l’aurez compris, sa grande popularité est due à sa facilité d’utilisation, et notamment à ses plugins.
Ressources :
Mise en valeur du champ de texte :
De-Constructing Accordéon and Effets de survol avec jQuery
Créer un beau « Ajoutez au panier Ajax » avec jQuery et PHP
50 nouvelles techniques Javascript
21 Solution CSS/Javascript pour embellir vos sites
Auteur: Gaétan Weltzer, comme toujours en fait.
lazy -
Content de voir un article comme ca sur ton blog, il est vrai que les librairies tel que JQuery, Mootools, Prototype… Sont de vrai atout.
Couplé à du HTML/CSS on peut donner une certaine interactivité vraiment intéressante. C’est une bonne alternative à Flash qui a tendance à être plus lourd et moins adapté à la SEO.
Bonne initiative de présenter cela comme ca, en espérant en avoir plus par la suite 😉
Design Spartan -
On verra si l’engouement pour cet article est là…
Sinon oui c’est très pratique, surtout les plugins qui vont vite. Après j’ai toujours bien aimé Flash et c’est surtout plus facile pour moi de développer quelque chose en Flash plutôt qu’en JS… après tout dépend 😛
Soso -
Merci pour la petite citation Design Spartan, ton article n’est pas mal non plus !
laurent -
Tu résumes bien le tableau.
J’ajouterais que l’engouement actuel pour ce type de framework ne doit pas faire oublier que js ne devrait servir que pour les effets « cosmétiques » d’un site. Il n’est pas rare de voir des sites dont la navigation est basée sur js, et donc opaque (ou preque) pour les moteurs.
Le concept d’amélioration progressive (du bon html sémantique+css+éventuellement js ou flash) est une méthode robuste qui permet d’avoir un site fonctionnel quelles que soient la config du navigateur (flash ou pas, js désactivé etc, lecteur d’écran), accessible à tous et lisible par les moteurs.
Design Spartan -
> Soso : De rien 😉
> laurent : Tu as bien raison, il faut toujours veiller à ce que la « dégradation » soit propre. Le plus souvent c’est avec Flash que cela pose problème, étant donné que le Javascript repose justement souvent sur html/css.
zetura -
Comme l’a dit laurent, bien souvent les gens « abusent » du JavaScript et l’utilisent pour tout et n’importe quoi. Personnellement, je pars sur une règle précise lorsque je travail avec du JS. Si je désactive le JavaScript de mon navigateur, les internautes doivent toujours pouvoir circuler sur mon site sans problème et conserver son affichage « normal ».
LuciferX -
Pour ceux que ca intéresse, vous trouverez pas mal de ressources pour Jquery sur http://blog.arnaud-k.fr/
Design Spartan -
Le blog a l’air pas mal en effet, merci LuciferX. Je jetterai un oeil.
bart -
Bonsoir,
Sur IE7 j’ai un souci : lorsque je place une image avec de la transparence à l’intérieur de ma « DIV accordeon », la transparence n’est pas prise en charge. (Evidemment sur Firefox aucun soucis)
Toute suggestions me sera utile 🙂
+
Design Spartan -
Salut bart, alors là je t’avoue ne pas savoir, je crois que je n’ai jamais eu de problèmes de transparence sur IE7, seulement sur IE6. Je te conseille de demander conseil sur le forum d’Alsacréation. Bonne chance :p
Sublimeo -
La galerie de design pour tous les adeptes du jQuery: http://jquerystyle.com.
Sites web, plugins, tutorials, blog…