Tag: CSS’

Delicious du février 9th au mars 5th

 - by admin

Mes derniers signets du février 9th au mars 5th:

jQuery 1.3

 - by admin

Longtemps accro au Framework Prototype, j’ai gentillement migré vers jQuery que je trouve d’une part plus simple de prise en main, plus rapide et surtout qu’il dispose d’une communauté très active et propose beaucoup de plug-ins divers et variés.

Récemment passé en version 1.3, voici une traduction de l’annonce officielle:
Les grandes fonctionnalités de cette version sont :

  • sizzle : un moteur de sélection basé sur les CSS, tout chaud sorti du four ;
  • live event (évènements en direct) : de la délégation d’évènements (event delegation) avec un zeste de jQuery ;
  • révision des évènements jQuery : la gestion des évènements a été complètement révisée pour la simplifier ;
  • réécriture de l’injection HTML : le HTML est ajouté à la vitesse de l’éclair ;
  • réécriture de offset : calcul de la position super-rapide ;
  • abandon de la détection de navigateur (browser sniffing) : nous utilisons la détection de fonctionnalités pour aider jQuery à durer encore de nombreuses années.

Tous les détails de cette version peuvent être trouvés dans les notes de version.

Sizzle

jQuery a un tout nouveau moteur de sélection basé sur les CSS, surnommé Sizzle. Vous pouvez lire tous les détails à son sujet dans les notes de version de jQuery 1.3 (qui comprennent les mesures de performance).

Plus important pourtant, nous faisons un grand saut en avant avec Sizzle : nous le publions comme un projet complètement indépendant destiné à être développé en collaboration par beaucoup de créateurs et de développeurs de bibliothèques. Nous avons vu là une opportunité de rendre quelque chose en retour pas seulement à la communauté jQuery mais à toute la communauté de développement Javascript ; et dans le même temps d’être capable de collaborer avec les développeurs d’autres bibliothèques sur un unique moteur de sélection unifié. Nous pensons qu’il y a trop de compétition et pas assez de coopération, et nous voyons donc notre code comme un premier pas vers un travail en collaboration.

En signe de bonne foi et de bonne volonté de coopérer, nous avons confié le projet Sizzle à la fondation Dojo (une très bonne organisation à but non lucratif taillée pour ce projet, à ne pas confondre avec le Dojo toolkit). Nous avons voulu un terrain de rencontre commun où tous les développeurs seraient capable de travailler ensemble et pour lequel il y a aurait un détenteur des droits d’auteurs clairement identifié sur le long terme.

Notre proposition de collaboration a déjà reçu d’incroyable réactions : les développeurs de Prototype, Dojo, Yahoo UI et TinyMCE (et de beaucoup d’autres projets) ont tous montré de l’intérêt à améliorer Sizzle jusqu’à la perfection.

Une page d’accueil sommaire du projet Sizzle peut-être trouvée sur http://sizzlejs.com/, ainsi que le code source.

Un nouvel explorateur pour l’API

Avec la version de jQuery 1.3, je suis heureux de présenter le nouvel explorateur de l’API, développé par Remy Sharp, et disponible sur http://api.jquery.com/.

jQuery API

C’est une alternative à l’API jQuery existante qui devrait être facile à parcourir et utiliser.

Le nouvel explorateur de l’API inclus les fonctionnalités suivantes :

  • toutes les dernières documentation sur jQuery et jQuery UI ;
  • la possibilité de marquer des pages comme préférées pour celles sur lesquelles vous revenez souvent ;
  • mise en valeur syntaxique dans les exemples de code ;
  • des exemples qui se lancent en direct dans le navigateur ;
  • des liens pour éditer les exemples de code et expérimenter.

Plus important cependant, le navigateur d’API est aussi disponible hors-ligne en tant qu’application Adobe AIR. L’interface et le fonctionnement sont les mêmes, et il est inclus un système de mise à jour automatique, ce qui fait que vous serez toujours à jour.

Télécharger et installer l’explorateur d’API AIR

Fondation jQuery

Alors que le projet jQuery croissait à une vitesse époustouflante, il était important pour nous, en tant qu’équipe, de prendre du recul et de déterminer comment la propriété du projet devait être gérée. Actuellement, John Resig, fondateur de jQuery et principal développeur, et Paul Bakaus, développeur principal de jQuery UI, ont tous deux les droits d’auteurs sur leurs projets respectifs. Cela pose plusieurs inquiétudes tant d’un point de vue pratique que juridique puisque cela fait que deux individus sont les propriétaires des projets plutôt qu’une organisation formelle. Et alors que de plus en plus de personnes et d’entreprises commencent à contribuer au projet, ces inquiétudes sont devenues de plus en plus prégnantes, créant de la confusion quand à qui était l’ayant droit réel de pans de travail spécifiques.

Après nous être rencontrés lors de la récente conférence jQuery, nous avons décidé de faire un effort concerté pour régler ce problème et déterminer comment nous pourrions transférer la propriété des projets jQuery à une organisation de type fondation qui :

  1. comprendrait la nature du développement de logiciel libre ;
  2. nous permettrait de continuer de diriger les projets sans entraves ;
  3. nous assurerait que les projets continuent de vivre quelque soit les personnes impliquées.

Après avoir examiné beaucoup d’options nous sommes arrivés à une dernière conclusion, et nous sommes heureux d’annoncer que la Software Freedom Conservancy a invité les projets jQuery à la rejoindre et à continuer son développement sous ses auspices. En rejoignant la Software Freedom Conservancy les projets et la communauté jQuery ont immédiatement eu certains avantages importants :

  1. cela permet aux membres actuels des projets de continuer de diriger les projets et de conserver la maîtrise des axes de développements actuels et futurs ;
  2. cela permet aux projets d’être considérés comme de vraies activités à buts non lucratifs, ce qui nous rends capables d’accepter les dons et les contributions sans impliquer à titre personnel d’énormes responsabilités financières.
  3. la propriété du code sera donnée à la Software Freedom Conservancy, ce qui nous assure qu’aucun individu ne possède de contribution ou n’a de droits sur les projets ;
  4. cela pourrait permettre à des entreprises d’amortir le temps que passe un employé sur le projet ;
  5. plus important, cela assure que le projet jQuery sera toujours un logiciel libre et ouvert.

C’est une grande étape dans la formalisation des projets jQuery et une réussite importante quant à s’assurer que les investissements faits par la communauté jQuery sont protégés. Nous effectuerons le transfert vers la Software Freedom Conservancy dans les semaines qui viennent. Il y aura très peu, voire pas du tout de changements dans la manière dont le projet est mené. L’équipe jQuery mènera et gérera toujours le projet et nous continuerons de travailler dur pour construire la meilleurs bibliothèque Javascript possible. Éventuellement, cela va même nous aider à libérer un peu de notre temps, que nous pourrons passer à coder — et qui n’aime pas entendre ça ?

CSS: donner du style à une gallerie d'images

 - by admin

Voici une petite astuce pour décorer vos galleries d’images sans modifier les images sources. L’astuce est très simple. Tout ce qu’il vous faut est une balise <span> et d’y appliquer une image de fond pour créé un effet de superposition pour ainsi arrondir les angles, ajouté du texte par-dessus l’image, décoré, etc…

Un aperçu des possibilités:

Tout est très bien expliqué (en anglais) sur WebDesignerWall: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Compilations de Cheat Sheets

 - by admin

Je voulais recensé toutes les Cheat Sheets que j’avais vu passé, mais l’ami Google m’a trouvé un autre blog qui le faisais déjà et c’est même très complet et classé par catégories:

Très pratique ! Perso j’ai la cheat sheet de Prototype sur mon bureau ;-)

CoverFlow avec Protoype JS

 - by admin

ProtoFlow c’est quoi ?
ProtoFlow est un effet coverflow écrit en Javascript. Il utilise les libraires Prototype et Scriptaculous pour l’essentiel du travail et Reflection.js pour les effets de réflections d’image.
Pourquoi ?
Et bien principalement parce que cet effet est devenu à la mode avec Apple qui l’implémente un peu partout (iTunes, puis iPod, iPhone,…) puis repris par beaucoup de développeurs. Il existe plusieurs « Cover-flow like » en javascript, mais ProtoFlow est le seul que j’ai trouvé utilisant Prototype.
Comment ?
C’est très simple:
Ajouter Prototype, Scriptaculous et Reflection.js à votre page
Ajouter ProtoFlow.js et ProtoFlow.css à votre page
Ajouter le Markup et un onLoad event (comme décrit ci-dessous)

Mise en oeuvre:

Code HTML:
[code lang="html"]
<div id="myCoverFlow">
<a href="http://www.google.com"><img src="image1.jpg" alt="Caption for this image 1"/></a>
<a href="http://www.google.com"><img src="image2.jpg" alt="Caption for this image 2"/></a>
<a href="http://www.google.com"><img src="image3.jpg" alt="Caption for this image 3"/></a>
.....
<a href="http://www.google.com"><img src="imageN.jpg" alt="Caption for this image N"/></a>
</div>
[/code]

Initialisation de ProtoFlow:
[code lang="js"]
Event.observe(window, 'load', function(evnt) {
var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
startIndex: 2, // Image sélectionnée par défaut
slider: true, // afficher ou pas le slider
captions: true, // afficher ou pas la légende (par défaut false)
useReflection: false, // Reflet ou pas (a noté que celà va ralentir l'effet)
enableOnClickScroll: true // Scroll avec le click
});
});
[/code]

Et boom, c’est terminé ;-)
ProtoFlow est développé par DeenSoft

Clônes de Lightbox

 - by admin

Lightbox c’est quoi ? C’est à la base un script javascript couplé à du CSS qui permet de zoomer sur des photos en les superposants au site que l’on visite.
Sur ce principe là, une multitude de clônes ont vu le jour, utilisant les frameworks Prototype, MooTools, jQuery ou autres, avec toujours plus de fonctionnaliés.
Ça commençait à devenir très compliqué de s’y retrouvé parmis toutes ces versions mais heureusement ce site est apparu:

Il compare en effet tous les clônes de Lightbox et permet de filtrer ses résultats suivant les fonctions que l’on veux, à bookmarker ! :)