1stwebdesigner propose un tutoriel permettant de créer une ombre portée dynamique à base de CSS / Spriting / jQuery sur les éléments d’une page web en fonction d’une source lumineuse placée sur la page.

Ce n’est pas clair ? Je vous invite tout d’abord à jet un œil à cette page de démonstration exceptionnelle (n’oubliez de faire glisser l’ampoule après l’avoir allumée !).

Comme vous avez pu le constater, le script adapte l’angle ainsi que la profondeur de l’ombre portée en fonction de la position de la source lumineuse sur la page !

Tout simplement awesome ! Pour ceux qui désirent comprendre pas-à-pas comment réaliser ce type d’effet, je vous invite à consulter le tutoriel !

jScratchcard est un plugin pour le framework JavaScript jQuery permettant de créer des zones grattables à la manière des jeux de grattages que l’on retrouve chez nos buralistes. Il devient alors possible d’imaginer la création de toutes sortes de jeux de grattages directement en HTML / CSS / jQuery (rappelons que ce type de jeux existe déjà sur le web en Flash).

Très simple d’utilisation, le plugin jScratchcard propose également une personnalisation des effets de grattage assez poussée. De quoi ravir les webmasters spécialisés dans le domaine !

En tout cas, félicitation à Senamion.com pour le plugin !

Voir la page de démonstration du plugin jScratchcard.

Tout simplement… impressionnant !

A l’occasion des 30 ans de PAC-MAN Google à mis en ligne un nouveau logo interactif qui se transforme en jeux video lorsqu’on clique dessus ! Il est alors possible de jouer à PAC-MAN à l’intérieur du logo lui-même !

Petite astuce, cliquez sur le bouton « Insérer Pièces(s) » qui à remplacé le bouton « J’ai de la chance » pour ajouter Miss PAC-MAN à la partie et jouer à deux !

Pour information, vous pouvez retrouver le logo Pacman sur ce permalien

Dans notre série sur les jeux vidéos basés sur des technologies web, cet exemple est de loin le plus impressionnant ! Il s’agit d’un Tetris en 3D nommé Torus réalisé en HTML 5 à l’aide de l’élément canvas !

Cette fois-ci, ce jeux créé par Ben Joffe dispose d’un rendu d’une fluidité exceptionnelle et d’un gameplay n’ayant rien à envier au mythique Flash.

Une nouvelle fois, cet exemple donne une vision de plus en plus précise de ce que nous réserve le web dans un avenir proche !

A découvrir de toute urgence !

La nouvelle version du framework PHP, CodeIgniter 2.0 est disponible depuis quelques semaines en téléchargement sur la plateforme collaborative Mercurial, bitbucket. Cette nouvelle version apporte son lot de nouveautés comme une toute nouvelle librairie de gestion des frameworks JavaScript tels que jQuery ou Mootools. L’implémentation native se limite pour le moment à jQuery mais l’architecture du code laisse penser qu’il sera très facile d’implémenter votre librairie JavaScript préférée !

L’équipe d’EllisLab apporte également un nouveau concept de packages dont nous parlerons certainement très prochainement !

A noter également que le répertoire application à été déplacé en dehors du répertoire system ! Ce qui devrait nous éviter quotidiennement quelques centaines de clics !

Si vous n’avez pas encore tester cette version, c’est le moment de télécharger CodeIgniter 2.0 !

Cet émulateur Commodore 64 écrit en JavaScript par Tim de Koning est un portage du script original de Darron Schall qui fût écrit en Actionscript. Celui-ci reprend toutes les fonctionnalités de l’émulateur mais fonctionne cette fois-ci grâce à des canvas HTML5 et JavaScript. Il peut donc fonctionner sans Flash player mais nécessite beaucoup plus de ressources que son prédécesseur !

Le script est capable de faire tourner le noyau du commodore et même de lancer quelques vielles ROM de jeux-vidéo de l’époque !

Ce projet nous donne une nouvelle fois un aperçu des fonctionnalités futures du web qui seront démocratisées peu à peu avec le support d’HTML 5…

Attention, ressources systèmes requises !

Parmi la liste des jeux vidéos old school portés en JavaScript, c’est cette fois-ci au tour de Super Mario Bros d’entrer dans l’aire 2.0 !

Le célèbre titre à été porté en JavaScript par Guillermo Bruchmann, c’est assez impressionnant et c’est disponible à cette adresse : http://jsmario.com.ar/

Le contexte

Imaginons que vous devez appliquer le même comportement d’événement à un ensemble d’éléments, il devient alors tout à fait naturel de créer une classe CSS qui permettra d’identifier tous les éléments et ainsi leur appliquer le comportement d’événement simultanément.

Ceci ce traduirait par le code jQuery ci-dessous (notez que j’utilise jQuery à la place de $ pour des questions de compatibilité avec d’autres librairies) :

jQuery('.jQuery-elements-1').change(function(e){
   //traitement de l'événement
});

Le problème

Le code que nous venons de voir fonctionne bien, en revanche comment appliquer ce même comportement à un second ensemble d’éléments sans pour autant dupliquer de code ? Imaginons maintenant que nous possédons un second ensemble d’éléments portant pour une raison quelconque une classe CSS différente mais pour lequel nous désirons le même comportement d’événement.

La première solution qui vient à l’esprit consiste à dupliquer le code précédemment vu et à modifier la classe CSS utilisée pour pointer les éléments. C’est là qu’un peu d’astuce vas nous permettre d’éviter cette dupplication ! En effet, jQuery possède un puissant système de sélecteurs permettant de cibler des éléments HTML,en l’occurrence il suffira de séparer les deux classes CSS par une virgule pour appliquer le comportement d’événements à tous les éléments d’un seul coup !

jQuery('.jQuery-elements-1, .jQuery-elements-2').change(function(e){
   //traitement de l'événement
});

Pratique, n’est-ce pas ?

Voici un aperçu très original proposé par rickyh.co.uk du mariage entre MooTools et CSS3 et des nouvelles possibilités qu’offrent ces deux technologies en termes d’effets visuels pour le web. Inutile de préciser qu’il est préférable de disposer d’un navigateur récent

Glissez par ici…

La version 1.3.x de Magento comporte des dysfonctionnements sous Internet Explorer ou encore Safari 4 sur certains serveurs tels que :

• L’impossibilité de se connecter à l’interface d’administration
• L’impossibilité d’ajouter un produit au panier

Il existe plusieurs solutions permettant de corriger ces problèmes, en voici une qui fonctionne dans certains cas et consiste à réduire le niveau de sécurité de Magento concernant les cookies.

Rendez-vous dans Système / Configuration / Web et appliquez les réglages visibles sur la capture d’écran ci-dessous :

Remplacez Domaine du cookie par votre nom de domaine (ex : www.kromack.com).

Corriger le bug de double quantité lors de l’ajout au panier

Il est possible que vous obteniez également un nouveau bug qui double systématiquement la quantité sélectionnée par l’utilisateur lors de l’ajout d’un produit au panier.

Pour corriger ce bug, ouvrez le fichier template/catalog/product/view/addtocart.phtml et remplacez à la ligne 37 :

<button type="button" class="form-button" onclick="productAddToCartForm.submit()">

Par :

<button type="button" class="form-button" onclick="productAddToCartForm.submit(); return false;">

N’oubliez de raffraichir le cache de Magento pour prendre en compte ces changements.