Après quelques mois d’absence, je vous présente une galerie d’images faite sous jQuery.

Avec des transitions à faire rougir les flasheurs, elle s’intégrera très facilement dans votre site Web.

Testé sur Android et iPhone, je suis resté impressionné par le rendu.

Pour les téléchargements, ça se passe sur :

Site de l’auteur

Dans le même genre, il existe :

• Coin Slider
• Nivo Slider
• Galleria
• Horinaja

J’aime de plus en plus utiliser la librairie jQuery, c’est pourquoi je vous présente aujourd’hui un plugin : « Feature List ».

Démonstration

Pour vous aider à voir le résultat, voici un aperçu :

Et une démo

Pour l’intégration, c’est très simple :

• Ajoutez les librairies javascript :

 <script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.featureList-1.0.0.js"></script>

• les feuilles de style :

 <link
      rel="stylesheet" type="text/css"
      href="http://fonts.googleapis.com/css?family=Reenie+Beanie">

• Affichez votre page HTML :

<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="services.png" />
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="programming.png" />
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="applications.png" />
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="sample1.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample2.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample3.jpg" />
					<a href="#">See project details</a>
				</li>
			</ul> 

		</div>

• Lancez le code javascript :

// On attend le chargement de la page
$(document).ready(function() {

	// On crée la "feature list"
	$.featureList(
		$("#tabs li a"),
		$("#output li"), {
			start_item : 1
		}
	);
});

Télécharger un exemple
Accéder au site du créateur

Une vulnérabilité découverte dans certains produits Adobe permet à un utilisateur distant mal intentionné de provoquer un déni de service ou d’exécuter du code arbitraire (prise à distance le contrôle d’un poste par exemple).

Pour contourner la faille provisoirement, la solution est de :

• renommer, supprimer ou retirer les droits d’accès du fichier suivant : C:\Program Files\Adobe\Reader 9.0\Reader\authplay.dll

Voir le bulletin d’alerte du gouvernement

Google ne cessera jamais de me surprendre…
Avec Google Font API et Google Font Directory vous pouvez intégrer une police de caractère gratuitement, sur votre page Web, sans que le visiteur l’ai d’installée sur sa machine.
Cette fonctionnalité est apportée grâce à deux services Google :

• Google Font API qui fournit le code à inclure dans votre page Web pour ajouter une police
• Google Font Directory est une base de données « Google » de police

Voici un petit exemple :

Rendez le web plus joli !

Et voici le code :

• Ajouter la feuille de style fournie par Google

 <link
       rel="stylesheet" type="text/css"
       href="http://fonts.googleapis.com/css?family=Reenie+Beanie">

• Appliquer la nouvelle ‘font-family’ comme vous le faites habituellement.

        <style type="text/css">
            h1{
                font-family: 'Reenie Beanie', serif;
                font-size: 30px;
            }
        </style>

• Créer une balise d’exemple :

<h1>Rendez le web plus joli !</h1>

Compatible avec tout les navigateurs (même IE6 !), cette solution permet de devenir très prometteuse dans l’avenir, face à des solutions comme Fonts@Live qui fournit quant à elle des polices payantes.

J’ai été assez surpris par cette librairie javascript qui permet de faire de la 3D.

Le rendu est très fluide, il y a même un compteur de FPS (frame per seconds).

Voici quelques exemples :

A quand les jeux vidéos en javascript  ?
Se rendre sur le site de l’auteur.

Exemple de code :
(Lire la suite…)

LazyLoad est une librairie jQuery qui permet d’éviter la surcharge du serveur en ne téléchargeant pas les images inutiles.

Elle permet donc de ne pas télécharger les images qui ne sont pas visible dans la fenêtre de l’internaute (les images en bas de page, non visible au chargement).
Ces images ne vont être chargée que lorsque l’utilisateur fait défiler la page et arrive à l’image pas encore chargée).

Pour mieux la découvrir je vous invite à vous rendre sur http://www.appelsiini.net/projects/lazyload.

Demo