background preloader

Inclure la librairie jQuery de manière optimisée - Alsacréations

Inclure la librairie jQuery de manière optimisée - Alsacréations
jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici, en détails, quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement. Appel classique à la librairie (fichier téléchargé) De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.x.x.min.js. Fichier et compression Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Voyez les différences entre la version non minifiée et la version minifiée. Performances au chargement Vous obtiendrez ainsi : <! <! Démo

Comment insérer des vidéos Youtube HTML5 sur votre site ? - Framasoft Framafox Lorsqu'on insère une vidéo Youtube dans une page web, on se retrouve avec un super player flash et notre vidéo en FLV qui se joue dedans. Impecc... Pour faire ça, il suffit simplement de copier coller le code qui se trouve sous la vidéo youtube. Ce qui donne un truc comme ça : Bon, ça on le savait tous. Mais comment faire pour insérer une vidéo Youtube qui soit affichée en HTML5 (avec la balise vidéo) ou en flash selon le navigateur de vos visiteurs ? Si je prend par exemple l'url de la dernière bande annonce de TRON, voici ce que j'obtiens : J'adapte un peu l'url pour avoir ceci : C'est à dire pour avoir le player directement, qui sera soit du HTML5 si votre navigateur le supporte, soit du flash si votre browser est à la masse ;-) Ensuite, un petit coup de iFrame magique comme ceci : EDIT : Sur les conseils de Diti, j'ai testé avec une balise object et ça à l'air de le faire un peu plus dans les normes. [Source et photo]

Astuces d'Absolacom » Gestionnaire de fichier en ligne: AjaxBrow Dans la série des test sur les gestionnaires de fichier en ligne, voici ajaxbrowser (à ne pas confondre avec AjaxPlorer qui arrive dans le prochain test) Ajax dans le nom? Je m’attends à de la rapidité et de l’ergonomie. L’installation Simplicime. Pas bon: le fichier d’install reste en place à la fin de l’installation et pas de message disant de le supprimer. Les paramétrages Quand on se rend sur le site, il est demandé de créer un utilisateur d’administration. Pas bon: si quelqu’un tombe sur le site avant moi, il peut créer son admin et je n’ai pas accès à mon site. Les paramétrages s’ouvrent ensuite directement. Les réglages sont assez limités, autant pour les users que pour les droits. Utilisation Premier point négatif: pas de message quand on se trompe dans l’identifiant/mot de passe. Je me connecte en tant qu’utilisateur sans droits, un clic sur un fichier permet de modifier le nom du fichier (même s’il ne sera pas effectif), c’est assez perturbant. En vrac: Conclusion

Firefox: 46 features you might not know about ✩ Mozilla Hacks – Ever since the release of Firefox 3 we’ve been doing a lot of work to add new capabilities for web developers. We thought it would be worth it to make a post that actually listed all of the features that we knew about and people might not know about. This contains everything that we’ve done over the last three releases or so, but calls out stuff that’s new in 3.6. Enjoy! @font-face Display online fonts (supports WOFF and TTF fonts) pointer-events Click through elements :-moz-locale-dir(ltr/rtl) Know if you are in a ltr or rtl context :indeterminate pseudo-class For “indeterminate” radio and checkboxes Media Queries Select CSS depending on the media (size, aspect-ratio, colors, orientation, resolution). has new classes to detect if you’re on a touch device. Structural pseudo-classes :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type, … -moz-border-radius Rounded borders CSS Transforms Scale, translate, skew and rotate your elements CSS Gradients Use linear and radial gradients as backgrounds

Comment utiliser la dernière version de jQuery dans WordPress ? Si vous souhaitez utiliser la dernière version de jQuery en lieu et place de la version imposée dans WordPress dans la partie publique (thème) et admin, ajoutez ces lignes dans le fichier functions.php de votre thème (le créer au besoin) : wp_deregister_script('jquery'); wp_register_script('jquery',' false, ''); wp_enqueue_script('jquery'); L'adresse mentionnée est celle hébergée par le service Google APIs, qui propose de fournir les librairies JavaScript les plus courantes sur des serveurs publics et performants. Dans l'exemple présent, la version est indiquée par la chaîne /1/ qui sélectionnera automatiquement la dernière version de la branche 1.x. Si vous rencontrez des incompatibilités avec certaines zones de l'administration, vous pouvez toujours ne l'activer que pour la partie publique de votre site, en insérant ce code : Lisez aussi : Comment inclure jQuery de manière optimisée.

jQuery 1.4 - Alsacréations jQuery, la célèbre librairie JavaScript, vient de connaître une nouvelle version (la 1.4 après avoir fait vivre plusieurs mois la 1.3.2) inaugurant quelques nouveautés et optimisations. La documentation jQuery API a été totalement réécrite et réorganisée. Parmi les changements et améliorations apportées dans la version 1.4 : La librairie est désormais un peu plus lourde (23 Ko minifiée et compressée contre 19 auparavant, 154 Ko en version normale). Google Closure Compiler est utilisé pour produire la version minifiée. Du point de vue des performances les améliorations sont très sensibles, dans bon nombre de fonctions essentielles : Téléchargement : Sur Google Code, la nouvelle version est déjà disponible à l'adresse jQuery a été développé initialement par John Resig et compte désormais une vingtaine de contributeurs.

Galerie photo avec JavaScript - Alsacréations Ce tutoriel pour débutants propose la création d’une galerie d’images simple avec HTML, CSS et une surcouche JavaScript. Préambule: en complément ou en remplacement de ce tutoriel créé en 2005, nous vous proposons de consulter un tutoriel plus récent : Une galerie d’images simple avec jQuery. Ce dernier est destiné aux personnes ayant déjà des bases en JavaScript et si possible avec jQuery. Voici un petit exemple concret d'un cas où JavaScript permet un gain au niveau de la navigation sans entrave à l'accès au contenu au cas où ce dernier soit désactivé. Voir la démonstration Il peut être très avantageux d'utiliser le JavaScript pour certaines choses comme notamment des galeries photos (ou autre), en effet vous ne rechargez pas la page au clic sur la miniature, la photo en taille réelle est directement affichée sans recharger quoi que ce soit. Les codes HTML et CSS La fonction JavaScript gérant la galerie Il faut maintenant créer ce fichier script.js.

Related: