index.php

Elastislide est un slider / carousel jQuery avec une dose de design responsive pour s’adapter aux différentes résolutions.
Pour créer des pages web responsive, il ne faut pas uniquement penser à la présentation, ajustable avec du CSS. Il faut aussi penser aux fonctionnalités, comme les sliders, slideshow, carousels…

Elastislide permet de résoudre cette problématique, et propose un carousel d’image redimensionnable suivant les dimensions du navigateur.

Côté code, voici ce qu’il faudra mettre en place en HTML:

<div id="carousel" class="es-carousel-wrapper">
	<div class="es-carousel">
		<ul>
			<li><a href="#"><img src="images/Benodet_01.jpg" alt="Bénodet" /></a></li>
			<li><a href="#"><img src="images/Benodet_02.jpg" alt="Bénodet" /></a></li>
			<li><a href="#"><img src="images/Benodet_03.jpg" alt="Bénodet" /></a></li>
			<li><a href="#"><img src="images/Benodet_04.jpg" alt="Bénodet" /></a></li>
		</ul>
	</div>
</div>

(suite…)

Grâce au HTML5 et au CSS3, nous pouvons développer des sites internet sans l’utilisation d’image pour réaliser des coins arrondis, des ombres portées, …

Fin Octobre, le livre HTML5, une référence pour le développeur web sortira dans les librairies. Ce livre donne les explications, les bonnes pratiques et les astuces utiles au développeur pour profiter au maximum des nouvelles fonctionnalités tout en insistant sur la performance, la qualité du code et de l’accessibilité.

Sommaire :
(suite…)

La dernière version de Worpress (celle que j’utilise) à été réalisée entièrement avec le HTML5, dernière recommandation  du W3C.

Seulement certaines fonctionnalités tel que les coins arrondis et les ombres portées ne s’implémentent pas tel quels sur tous les navigateurs, notamment sur Internet Explorer. D’après Microsoft, la version 10 de son navigateur implémentera ces recommandations.

Ils faut donc tricher sur le navigateur de Microsoft, pour cela il existe plusieurs Javascript.

CSS3PIE

Après avoir téléchargé le fichier d’archive zip contenant PIE.htc (33ko), la syntaxe est la suivante :

.arrondi {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	border-radius: 5px;
	behavior: url(chemin/PIE.htc);
}

ATTENTION : le chemin indiqué à la ligne « behavior: url(chemin/PIE.htc) » doit être le chemin par rapport au HTML et non au CSS !

Roundies
(suite…)