slDesign » HTML / CSS

Tutoriel HTML 5 : Réaliser une lecteur vidéo personnalisé

Steve Leherpeux — Tue, 14 Sep 2010 11:43:19 +0000

Depuis la sortie de HTML5 il est possible d’insérer et de manipuler de nombreux médias dans vos pages WEB, vous pouvez entre autre insérer un lecteur vidéo. C’est un réel plus pour les développeurs Web.

Nous allons donc voir comment intégrer un lecteur vidéo et comment le personnaliser afin d’obtenir le même design quelque soit le navigateur.

Information sur le document :

Version : 0.1
Date de publication : 14-09-2010
Date de révision : NC

Introduction

Avant de commencer vous trouverez sur le site du "W3C l’ensemble des informations portant sur la balise l’intégration de vidéo. Ces informations sont disponibles à l’adresse suivante : http://www.w3.org/TR/2008/WD-html5-20080610/video.html#video

Je tiens également à vous rappeler que l’intégration de vidéo via la balise ‘ n’est pas supporté par l’ensemble des navigateurs… et plus encore compliqué, les navigateurs ne supportent pas tous le même format de vidéo…

Théorie…

L’intégration de vidéo en HTML 5 se fait avec la balise "". Cette balise supporte différents attributs :

src :La source de la vidéo
poster : La source d’une image qui sera affichée si le navigateur ne supporte pas la balise "video"
autoplay :Démarrage automatique de la vidéo [Défaut = false]
start : Début de la vidéo
loopstart : Début de la lecture en boucle
loopend : Fin de la lecture en boucle
end : La vidéo est à la fin
playcount : Nombre de fois à lire
controls : Affiche ou non les contrôles
width : Largeur du lecteur
zq hauteur du lecteur

Les attributs src, autoplay, start, loopstart, loopend, end, playcount, et sont des attributs commun à tous les éléments de type "Médias".

Les étapes

Etape 1 – Création du document de base

Nous utiliserons ici une simple page Web :




Mon lecteur Vidéo HTML5

Etape 2 – Intégration de la vidéo

Nous allons intégrer une vidéo simple dans un premier temps. Saisissez le code ci-dessous dans votre page WEB :

Le résultat est le suivant :

Si vous cliquez avec le bouton droit de votre souris sur le lecteur, vous verrez apparaître un menu contextuel

Etape 3 – Etendre le lecteur

Nous allons maintenant étendre notre lecteur avec les attributs de base.

Nous avons ici simplement ajouter les contrôles et une image et activé l’autoplay

Création d’un lecteur vidéo HTML personnalisé:

Comme vous venez de le voir l’intégration du player est très simple mais limitée. En effet, le design de votre player dépend du navigateur et ce dernier n’est pas forcement adapté au design de votre site. Heureusement, nous allons pouvoir utiliser javascript ; en effet, les navigateurs sont gérés côté client donc, c’est votre navigateur qui intègre ce player. Nous allons donc pouvoir utiliser javascript pour agrémenter notre player.

Je vais dans cet article utiliser la bibliothèque jQuery que j’ai intégrée depuis Google Api. et j’ai également intégré la bibliothèque jQuery-ui. Je vais également créer un Plugin jQuery. Le code ci-dessous vous montre l’initialisation jQuery ainsi que la liaison avec mon plugin.

J’ai également ajouté un dossier "themes" ainsi qu’un dossier "themes/default/" qui vont héberger nos fichiers de styles. Vous trouverez ci-dessous la structure de notre projet :



	
	owPlayer - HTML 5 Web video Player

Ce tutoriel n’a pas pour but de vous expliquer le développement d ‘un plugin jQuery. Malgré tout, j’ai essayé de commenter le plus précisément possible le code de cette extension. Si vous ne vous sentez pas à l’aise avec jQuery et le développement de plugin, voici quelques ressources :
- Tutoriel sur l’édition de plugin jQuery [Lien]

- Tutoriel en Anglais [lien]

Théorie

Avant de commencer, il est utile de comprendre le fonctionnement et les attributs d’un lecteur vidéo HTML 5. Le lecteur HTML dépend de l’interface “Media Element”. Vous trouverez l’ensemble des informations relative à cette interface à l’adresse suivante : http://www.w3.org/TR/2010/WD-html5-20100624/video.html#media-element

Lorsque vous initialisez l’élément ‘’ vous avez accès à différents attributs.

Les éléments

readyState : Status de la video (Prete ou pas)
seeking : Retourne un intervalle de temps ; ceci permet de gérer un statut d’avancement
currentTime : Retourne la position actuelle
startTime : Retourne la position de départ
duration : Durée de la vidéo
paused : Status de la vidéo en pause
defaultPlaybackRate : Vitesse de lecture par défaut
playbackRate : Vitesse de lecture
TimeRange played : Retourne la durée jouée – intervalle
TimeRange seekable : Temps restant – intervalle
ended : Retourne vrai si la fin de la vidéo est atteinte
autoplay : Lecture automatique
loop : Relire la video
play : Jouer la vidéo
pause : Mettre la vidéo en pause
controls : Affiche les contrôles
volume : Volume du player
muted : Eteindre le son

Comme vous le voyez, nous disposons de différents attributs que nous allons pouvoir utiliser pour réaliser notre player. Javascript et dans notre cas jQuery vont nous permettre d’accéder et de manipuler nos données.

Etape par étape :

Etape 1 – Initialisation du plugin jQuery

La première étape consiste à initialiser notre plugin jQuery. J’ai decidé d’appeler ce plugin owPlayer

Penser utiliser un nom unique à votre plugin afin d’assurer la compatibilité avec d’autres plugin

Le code ci-dessous vous montre l’initialisation du plugin :

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function(){
			$owPlayer = $(this);

		});
	};
})(jQuery);

Ce code nous permet simplement d’initialiser notre plugin. Pour le moment la variable ‘default’ permettant de définir nos options par défaut est vide mais nous le compléterons ultérieurement.

Etape 2 – Chargement des feuilles de style

Notre extension va nous permettre de changer de thème en le spécifiant simplement dans les options ; nous devons donc charger les feuilles de style dynamiquement.

//Chargement des éléments de style
var cssThemeFile = options.theme;
$('').appendTo('head');
$('').appendTo('head');

Etape 3 – Construction du wrapper et des contrôles

Cette étape consiste simplement à construire notre interface. Nous aurions pû réaliser cette étape directement dans notre page HTML mais j’ai opté pour une génération interne à mon plugin.

Le code ci-dessous nous permet de créer un conteneur principal :

//Création du conteneur principal
$owPlayerWrapper = '';
$owPlayer.wrap($owPlayerWrapper);
$('.owPlayerWrapper').width(options.width);

Le code ci-dessous nous permet de réaliser notre conteneur qui accueillera nos contrôles:

//Création du panel de contôles
$owPlayerControls = '';
$owPlayerControls += '';
$owPlayer.after($owPlayerControls);

Ce code permet d’insérer un conteneur juste derrière notre balise "

Reste à insérer nos contrôles (boutons et autres éléments) à l’intérieur de ce conteneur

// Création des contrôles
var $owPlayerControls = '';
$owPlayerControls += 'Play / Pause';
$owPlayerControls += '';
$owPlayerControls += '00:00';
$owPlayerControls += 'Mute / Unmute';
$owPlayerControls += 'Volume';
$owPlayerControls += '';
$($owPlayerControls).appendTo('.owPlayerControlsContener');

Voici la liste de ces contrôles et leurs rôles :

owPlayerBtPlay : Bouton lecture / pause
owPlayerSeeker : Il s’agit de la barre d’avancement
owPlayerTimer : Le timer "00:00"
owPlayerSoundBox : Conteneur pour la gestion du son
owPlayerBtSound : Son on/off
owPlayerSoundTrigger : Bouton déco pour l’affichage du slider pour le son
owPlayerSoundSlider : Slider pour le son

Etape 4 – Bouton Play / Pause

Maintenant que nous venons de réaliser nos différents contrôles, il faut leur assigner des fonctions.

Commencons par le bouton "owPlayerBtPlay" ; ce bouton va nous permettre de jouer l’animation ou de la mettre sur pause. Nous l’avons vu plus haut, ce qui déclanche la video est l’action "play".

	/** Bt Play */
		$('.owPlayerBtPlay').click(function() {
			if ($owPlayer.attr('paused') == false) {
				$owPlayer[0].pause();
				$(this).removeClass('ui-icon-play').addClass('ui-icon-pause');
			} else {
				$owPlayer[0].play();
				$(this).removeClass('ui-icon-pause').addClass('ui-icon-play');
			}
		});

Quelques informations : Ce code permet de vérifier si le lecteur est en pause ou non. Le cas échéant, si le lecteur est en pause, on déclanche la lecture.

Etape 5 – Gestion du son

Nous allons maintenant nous occuper du son, nous avons deux éléments importants :

Le bouton On / Off
Le slider permettant de régler le volume

Dans un premier temps, occupons nous du bouton permettant d’activer / désactiver le son :

	/** Bouton pour le son */
		//@TODO Récupérer la valeur du son lors du Mute pour le récupérer lors de l'unmute
		$('.owPlayerBtSound').click(function(){
			if($owPlayer.attr('muted') == true){
				//Activation du son - le slider passe à 50
				$('.owPlayerSoundSlider').slider('value', '50');
				$(this).removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
			}else{
				//Desactivation du son
				$owPlayer.attr('muted', true);
				$('.owPlayerSoundSlider').slider('value', '0');
				$(this).removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
			}
		});

Cette action permet d’eteindre ou d’activer le son à travers le slider que nous verrons par la suite.

Le slider nous permet de gérer le volume du son. Pour réaliser ce slider, j’utilise l’extension “jQuery-ui "slider()"

	/** Slider pour le son */
	//Cache le slider à l'initialisation
	$('.owPlayerSoundSlider').hide();

	//Action pour afficher le slider
	$('.owPlayerSoundBox').hover(function() {
		$('.owPlayerSoundSlider').show();
	}, function() {
		$('.owPlayerSoundSlider').hide();
	});

	//Action du slider
	$('.owPlayerSoundSlider').slider( {
		orientation : "vertical",
		value:0.50,
		range:"min",
		max:1,
		step:0.05,
		animate:true,
		slide : function(e, ui) {
			$owPlayer.attr('muted', false);
			video_volume = ui.value;
			$owPlayer.attr('volume', ui.value);
		}
	});

Il s’agit ici simplement de lier notre slider à l’attribut "volume" du player.

Etape 6 – Gestion du seeker

Deux éléments encore. Le timer qui nous permet d’afficher le temps écoulé et le slider nous permettant de naviguer au sein même de la vidéo

Gestion du timer : Il s’agit ici de récupérer le temps et la position de lecture ; nous devons pour cela utiliser un "écouteur"

	//Durée totale de la vidéo
		var video_duration = $owPlayer.attr('duration');

		//Fonction de convertion pour le timer
		var gTimeFormat=function(seconds){
			var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
			var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
			return m+":"+s;
		};

		/** Gestion du Timer */
		var seekUpdate = function() {
			var currenttime = $owPlayer.attr('currentTime');
			if(!seeksliding) $('.owPlayerSeeker').slider('value', currenttime);
			$('.owPlayerTimer').text(gTimeFormat(currenttime));
		};

		//Mise à jour des informations
		$owPlayer.bind('timeupdate', seekUpdate);	

		//Affichage du texte
		$('.owPlayerTimer').text(' / '+gTimeFormat(video_duration));

La fonction jQuery "Bind" permet de mettre en continu le timer de notre lecteur. Au par avant, j’ai juste créé une fonction "gTimeFormat" qui permet de convertir notre temps en minutes/secondes

Dernière étape, le slider pour la navigation au sein même de la vidéo.

	/** Slider pour le seeker */

		//Initialise la variable du slider
		var seeksliding;

		var createSeek = function() {
			if($owPlayer.attr('readyState')) {
				var video_duration = $owPlayer.attr('duration');
				$('.owPlayerSeeker').slider({
					value: 0,
					step: 0.01,
					orientation: "horizontal",
					range: "min",
					max: video_duration,
					animate: true,
					slide: function(){
						seeksliding = true;
					},
					stop:function(e,ui){
						seeksliding = false;
						$owPlayer.attr("currentTime",ui.value);
					}
				});
			} else {
				setTimeout(createSeek, 150);
			}
		};

		createSeek();

Cette fonction "createSeek()" permet de réaliser un slider pour naviguer au sein même de la vidéo. Lors de l’arrêt du slider, il y a une recherche de la position.

Etape 7 – Appel du plugin

La derniere étape consiste à initialiser notre plugin dans notre page HTML. L’opération est simple, un simple "$([selecteur]).owPlayer([url],[options]);" permet de réaliser cette opération. Vous aurez bine évidement pris soin d’intégrer le plugin et les différentes bibliothèques au par avant.

Le code ci-dessous vous montre cette intégration :



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Résultat final

Cette capture vous montre le résultat final. Ce résultat et bien évidement le même sur Firefox, Chrome ou Safari (non testé sur les autres navigateurs)

Conclusion

Vous venez de voir qu’il n’est pas si compliqué que cela de rendre votre lecteur vidéo complètement personnalisé. Malheureusement, la compatibilité n’est pas encore au rendez-vous et faudra encore pour quelques temps compter sur les lecteurs Flash….

Cet exemple n’est qu’un bribe de ce qu’il est possible de réaliser, il est possible d’étendre ce lecteur en y insérant de nouvelles fonctions :

Playliste
Changement de thèmes dynamiques
Navigation de Playliste –Next / Prev
Gestion des différents navigateurs

Dans les prochaines versions, j’aurai l’occasion d’améliorer cette extension et de gérer ces différentes fonctions.

N’hésitez pas à laisser vos commentaires / remarques pour les éventuelles questions afin de faire évoluer cet article.

Vous trouverez-ci dessous les codes complets de l’application ainsi qu’un fichier zip téléchargeable.

Code javascript : owPlayer.js

(function($) {

	$.fn.owPlayer = function(uri, options) {

		// Initialisation des options par defaut
		var defaults = {
			autoplay : false,
			width : 854,
			height : 480,
			theme : 'default',
			poster : null
		};

		// On étend les options avec les valeurs par défaut
		var options = $.extend(defaults, options);

		this.each(function() {
			$owPlayer = $(this);

			// Chargement de la video
				$owPlayer.attr('src', uri);

				// Chargement des éléments de style
				var cssThemeFile = options.theme;
				$(
						'')
						.appendTo('head');
				$(
						'')
						.appendTo('head');

				// Création du conteneur principal
				$owPlayerWrapper = '';
				$owPlayer.wrap($owPlayerWrapper);
				$('.owPlayerWrapper').width(options.width);

				// Création du panel de contôles
				$owPlayerControlsContener = '';
				$owPlayerControlsContener += '';
				$owPlayer.after($owPlayerControlsContener);

				// Création des contrôles
				var $owPlayerControls = '';
				$owPlayerControls += 'Play / Pause';
				$owPlayerControls += '';
				$owPlayerControls += '00:00';
				$owPlayerControls += 'Mute / Unmute';
				$owPlayerControls += 'Volume';
				$owPlayerControls += '';
				$($owPlayerControls).appendTo('.owPlayerControlsContener');

				// Action des boutons et initialisation des sliders
				/** Bt Play */
				$('.owPlayerBtPlay').click(
						function() {
							if ($owPlayer.attr('paused') == false) {
								$owPlayer[0].pause();
								$(this).removeClass('ui-icon-play').addClass(
										'ui-icon-pause');
							} else {
								$owPlayer[0].play();
								$(this).removeClass('ui-icon-pause').addClass(
										'ui-icon-play');
							}
						});

				// Durée totale de la vidéo
				var video_duration = $owPlayer.attr('duration');

				// Fonction de convertion pour le timer
				var gTimeFormat = function(seconds) {
					var m = Math.floor(seconds / 60) < 10 ? "0"
							+ Math.floor(seconds / 60) : Math
							.floor(seconds / 60);
					var s = Math.floor(seconds - (m * 60)) < 10 ? "0"
							+ Math.floor(seconds - (m * 60)) : Math
							.floor(seconds - (m * 60));
					return m + ":" + s;
				};

				/** Gestion du Timer */
				var seekUpdate = function() {
					var currenttime = $owPlayer.attr('currentTime');
					if (!seeksliding)
						$('.owPlayerSeeker').slider('value', currenttime);
					$('.owPlayerTimer').text(gTimeFormat(currenttime));
				};

				$owPlayer.bind('timeupdate', seekUpdate);

				$('.owPlayerTimer').text(' / ' + gTimeFormat(video_duration));

				/** Slider pour le seeker */

				// Initialise la variable du slider
				var seeksliding;

				var createSeek = function() {
					if ($owPlayer.attr('readyState')) {
						var video_duration = $owPlayer.attr('duration');
						$('.owPlayerSeeker').slider( {
							value : 0,
							step : 0.01,
							orientation : "horizontal",
							range : "min",
							max : video_duration,
							animate : true,
							slide : function() {
								seeksliding = true;
							},
							stop : function(e, ui) {
								seeksliding = false;
								$owPlayer.attr("currentTime", ui.value);
							}
						});
						// $video_controls.show();
					} else {
						setTimeout(createSeek, 150);
					}
				};

				createSeek();

				/** Bouton pour le son */
				// @TODO Récupérer la valeur du son lors du Mute pour le
				// récupérer lors de l'unmute
				$('.owPlayerBtSound').click(function() {
					if ($owPlayer.attr("muted") == true) {
						// Activation du son - le slider passe à 100
						$('.owPlayerSoundSlider').slider('value', '50');
						$(this).removeClass('ui-icon-volume-off').addClass(
								'ui-icon-volume-on');
					} else {
						// Desactivation du son
						$owPlayer.attr('muted', true);
						$('.owPlayerSoundSlider').slider('value', '0');
						$(this).removeClass('ui-icon-volume-on').addClass(
								'ui-icon-volume-off');
					}
				});

				/** Slider pour le son */
				$('.owPlayerSoundSlider').hide();
				$('.owPlayerSoundBox').hover(function() {
					$('.owPlayerSoundSlider').show();
				}, function() {
					$('.owPlayerSoundSlider').hide();
				});

				$('.owPlayerSoundSlider').slider( {
					orientation : "vertical",
					value : 0.50,
					range : "min",
					max : 1,
					step : 0.05,
					animate : true,
					slide : function(e, ui) {
						$owPlayer.attr('muted', false);
						video_volume = ui.value;
						$owPlayer.attr('volume', ui.value);
					}
				});

			});
	};
})(jQuery);

Code HTML : index.html



    
	owPlayer - HTML 5 Web video Player
	
	
	
	


	owPlayer::

Code CSS : style.css

/**
 * owPlayer stylesheet file
 * Extend jQuery-ui stylesheet
 * @author slDesign
 * @version 0.1
 */

.owPlayer{
	margin:0;
	padding:0
}
.owPlayerControlsContener{
	height:24px;
	z-index:100;
	margin-top:-5px;
}

.ui-icon{
	border:1px solid #ccc;
	padding:1px;

}
.owPlayerControl{
	float:left;
	margin:1px 8px;
}

.owPlayerSeeker{
	width:500px;
	height:4px;
}

.owPlayerSoundBox *{
	margin:0;
}
.owPlayerSoundSlider{
	height:300px;
	float:left;
	margin-top:-90px;
}

Remerciements :

Merci à l’équipe de Big Buck Bunny pour la vidéo [site] [licence]. Cette vidéo a été réalisée sous Blender

Merci à Cristian-Ionut Colceriu pour son article initial qui m’a aidé à rédigé celui-ci

Support HTML 5 – La solution pour gérer la compatibilté des navigateurs

Steve Leherpeux — Sun, 08 Aug 2010 07:26:21 +0000

HTML 5, CSS 3 c’est bien beau, ça rend bien service et c’est sympa… malheureusement, tout n’est pas parfait au pays des rêves car de nombreux utilisateurs (vos lecteurs et utilisateurs) ne peuvent pas profiter de ces nouveaux attributs HTML et CSS.

Il est important de penser « utilisateurs ». Les modifications apportées par HTML 5 et CSS 3 ne sont pas encore implémentées par tous les navigateurs. Ne pouvant pas forcer tout le monde à utiliser un seul navigateur, il faut s’efforcer de prendre en compte cet compatibilité.

Comment pouvons nous vérifier cette compatibilité, comment savoir quel navigateur est compatible avec tel attribut HTML ou CSS ? C’est ce que je vous propose de voir dans cet article.

Solution Javascript

Une des première solution consiste à utiliser javascript pour vérifier

Si vous mettez ce simple script sur votre page, vous déclencherez une alerte « true » ou « false » selon les navigateurs.

Alerte sur un navigateur supportant l'attribut Pattern

Alerte sur un navigateur ne supportant pas l'attribut Pattern

C’est un moyen simple mais assez contraignant de vérifier la compatibilité de tel ou tel attribut…

Commentaires conditionnels

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d’inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l’une ou l’autre de ses versions.

Techniquement, il s’agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s’il doit interpréter le contenu du commentaire ou bien l’ignorer.

Cette technique a le mérite d’exister, surtout lorsque l’on connait les différences qu’il existe entre IE et les autres navigateurs mais, elle ne s’applique que à Internet Explorer et elle devient vite lourde à gérer…

Class Modernizr

Modernizr ajoute classes à l’élément

qui vous permettent de cibler les fonctionnalités du navigateur spécifique dans votre feuille de style. Vous n’avez pas réellement besoin d’écrire du Javascript pour l’utiliser.

Initialisation :

Il suffit de lier la bibliothèque dans votre doument HTML :

Voici un exemple concret concernant l’attribut « border-radius » qui n’est pas disponible sur IE… Eh bien, avec Modernizr vous pouvez accomplir tout cela! La syntaxe est très intuitive, aussi:

Code HTML


	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis fermentum quam, ut feugiat dui ornare eu. Aenean vitae purus eget nunc sagittis sollicitudin eget a lorem.

Feuille de style CSS :

	.radius p span{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display:block;
	width:300px;
}

.borderradius p span{
	border:1px solid #cc3300;
}

.no-borderradius p span{
	border:1px solid #000;
}

L’opération est simple, vous déclarer une class « .[mon attribut] » ou « .no-[mon atribut] » dans votre feuille de style pour gérer les différentes compatibilité…

Border Radius sous firefox

Border radius sous IE après mise en forme via ".no-borderradius"

Il est également possible d’appliquer des conditions sur des éléments javascript. Voici un exemple concernant « localStorage »

Cette bibliothèque ne répond surement pas à toutes les problématiques mais elle mérite que l’on s’y arrette. Elle est simple d’utilisation et bien documentée

Pour télécharger « Modernizr », rendez-vous sur le site de l’auteur : http://www.modernizr.com/.

Conclusion

Il n’existe pas de solution parfaite, cela dit, vous disposez de différentes techniques qui vous permettrons d’adapter vos pages Web sur tous les navigateurs. Vous pouvez également orienter vos utilisateurs à utiliser un autre navigateur.

-----

A bientôt…

Formulaires HTML5 – Quoi de neuf ?

Steve Leherpeux — Sat, 07 Aug 2010 08:37:05 +0000

Nouveautés HTML 5 – Formulaires et champs de formulaires

Petite introduction aux formulaires HTML 5… Je vous propose de voir en images et en code les différentes modifications apportées par les nouveaux attributs HTML 5.

Introduction :

HTML 5 apporte son lot de nouveautés également sur les formulaires. Il est important de prendre en considération ces modifications car elles vont permettre un meilleur échange entre les utilisateurs et éditeurs de contenu. Elles sont également là pour nous rendre service et optimiser le WEB de demain.

Information : A ce jour, ces nouveautés ne sont compatible qu’avec les navigateurs « WEBKIT » (Safari et Google Chrome).

Placeholder attribut :

Cet attribut permet d’insérer dans votre champ un exemple de texte à saisir qui a la propriété de disparaître au focus. Ceci remplace l’utilisation de javascript pour réaliser cette opération…

Avant…

Après…

Autofocus

cet attribut permet de sélectionner un champ en particulier au chargement de la page

Avant…

Après…

Exemple HTML 5 Autofocus

Attribut Required

Permet de spécifier si un attribut est obligatoire. Si le champ reste vide au submit, il sera mis en évidence.

Avant…

		 	
		 	
		 		Nom d'utilisateur : 

		 		

				Mot de passe : 

				

				Prénom :

Aperçu Required avant HTML5

Après…

		 	
		 		Nom d'utilisateur : 

		 		

				Mot de passe : 

				

				Prénom :

Résultat attribut HTML5 Required

Champ email & url

Permet de spécifier un type de champ email ou url et execute des vérifications

Avant…

        
		
					News Letter : 

					

					Votre site Web :

Check mail avant HTML5

Check URL avant HTML5

Après…

				
					News Letter : 

					

					Votre site Web :

Résultat Champ de type Mail HTML5

Les messages d’erreurs seront directement gérés par les navigateurs.

Il est également possible d’utiliser l’attribut « pattern » qui vous permettra de spécifier la structure des données saisies en lieu et place d’un REGEX javascript :

Si vous êtes familier avec les expressions régulière vous aurez compris que le format accepté devra contenir uniquement des lettres de 4 à 10 caractères.

Les nouveaux types de champs :

Voici les différentes valeurs pouvant être attribuées :

tel
search
url
email
datetime
date
month
week
time
datetime-local
number
range
color

Conclusion

Certes ces nouveautés ne sont encore applicable que sur les navigateurs « WEBKIT » mais il est clair que ces nouveaux attributs seront disponible sous peu pour les navigateurs Mozilla (voir IE…). Alors n’hésitez pas à utiliser ces nouveaux attributs dès maintenant.

Lien : Documentation W3C

Speed tuts : local storage ou la sauvegarde locale

Steve Leherpeux — Fri, 06 Aug 2010 07:42:35 +0000

HTML 5 nous apporte de nombreuses et belles surprises dont un fait l’objet de ce tutoriel : « localStorage ». A vrai dire, cette fonctionnalité ne fait pas parti officiellement de HTML 5 mais y est lié indirectement.

Le principe est simple, cette fonctionnalité vous permet de sauvegarder l’ensemble de vos données saisies en locale ; que vous rafraichissiez la page ou que vous quittiez votre navigateur et le relancez sur la même page, vos données seront sauvegardées.

Nous allons voir dans ce tutoriel la façon d’implémenter « localStorage ».

I – Introduction & prérequis

Avant de commencer, vous devez connaître le HTML 5 ainsi que l’utilisation du framework javascript jQuery.

Page de base :



 
 
 
 Tutoriel local storage

Vous trouverez ci-dessous la page qui nous servira de base pour ce tutoriel et qui intègre la bibliothèque jQuery

II – Création d’un contenu éditable

Un des nouveaux attributs de HTML 5 est « contenteditable ». Cet attribut vous permet de réaliser des éléments éditables par les utilisateurs. Pour mettre en place cet attribut

Code HTML – zone de saisie :

Todo Liste

Liste éditable

Jusque là, c’est bien mais lorsque vous quittez votre navigateur ou si vous rafraichissez votre page, le contenu ne sera pas sauvegardé… Comment faire sans pour autant poster nos données ?

Utilisation de javascript

Pour sauvegarder nos données, nous allons utiliser la propriété « localStorage » qui nous permettra de sauvegarder nos données en locale sans l’utilisation de cookies. Vous trouverez ci dessous le code javascript commenté qui nous permettra de réaliser cette opération.

Code javascript :

Une fois cette opération réalisée, sauvegardez votre fichier puis saisissez plusieurs lignes dans votre liste et sortez du focus. Vous pouvez maintenant fermer votre navigateur et le relancer ou encore rafraichir votre page, les données saisies seront sauvegardées.

Code complet et ressources :

Code complet du tutoriel :

Tutoriel local storage

Todo Liste

Compatibilité

Au moment ou je vous parle, cette implémentation est compatible avec les navigateurs et versions suivantes (windows):

Chrome 4 +
Firefox 3.6 +
IE 8 +
Opéra 10 +
Safari 4 +

Tutoriel CSS : 3D Transform

Steve Leherpeux — Tue, 27 Jul 2010 07:36:25 +0000

Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».

De la 3D en CSS ?

Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.

Nous verrons dans cet article comment réaliser un cube en effet 3D.

I – Introduction

Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).

Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...

1°) Prérequis

Connaissances HTML / CSS
Vous vous souvenez de vos cours de géométrie ?
Un éditeur CSS / HTL

2°) Un peu de théorie...

http://www.w3.org/TR/css3-3d-transforms/

Rotation d'un objet : -moz-transform: rotate(angle);

Exemple :

-moz-transform: rotate(30);



Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°



Redimensionnement 2D axe X et Y d'un objet : -moz-transform:  scale(sx[, sy]);

Si [sy] n'est pas renseigné, il aura la même valeur de [sx]

Modifier la perspective : -moz-transform: skew(ax,[ay]);

Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.

Exemple : -moz-transform: skewY(30deg);

Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.

-moz-transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d construit la transformation de la matrice
   ┌     ┐
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Quelques exemples :

.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}

Rendu (figure 1.2.3)

Figure 1.2.3 - Rendu de la proprité transform:matrix

Exemple 2 - Retournement d'objet

.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}

Résultat (figure 1.2.4) :

Figure 1.2.4 - Résultat transform:matrix - retournement d'objet

Exemple 3 : Reflexion

-moz-transform: matrix(1, 0, 0, -1, 0, 0);

Figure 1.2.5 - Exemple transform:matrix - Reflexion

Autres exemples (non-shématisés) :

Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);

II - Création d'un cube 3D

1°) Code HTML de base

Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.

Code HTML du cube





Tutoriel CSS 3D




 
 Content
 Content
 Content

J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.

Code CSS fichier style.css

#cube {
 position: relative;
 top: 200px;
 margin:0 0 230px 0;
}

#cube .cubeSide{
 height:200px;
 width:200px;
}
#topSide{
 background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}

Voici le résultat obtenu (figure 2.1.1) :

Figure 2.1.1 -CSS Transform - Cube 3D Etape 1

Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :

.leftFace {
 background: #ff8000;
 -moz-transform: skewY(30deg);
}

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
}

Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.

Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)

Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .

Code CSS : Positionnement des DIV

.topFace, .leftFace, .rightFace {
position: absolute;
}

Figure 2.1.3 - Positionnement absolute des blocs

Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.

.rightFace {
 background: #800080;
 -moz-transform: skewY(-30deg);
 top: 200px;
 left: 200px;
}

Figure 2.1.4 - Positionnement du bloc "rightSide"

Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...

.topFace {
 -moz-transform: rotate(60deg);
 left: 100px;
 top: 42px;
}

.topFace div {
 background: #0080c0;
 -moz-transform: skewY(-30deg) scaleY(1.16);
}

Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.

Figure 2.1.5 - CSS Effet 3D - Cube final

Avec un peu d'habillage, voici le résultat final :

Figure 2.1.5 - CSS Effet 3D - Cube Final

SpeedTuts : CSS Image Switcher

Steve Leherpeux — Fri, 16 Jul 2010 08:28:36 +0000

Dans le cadre de ce tutoriel, nous allons voir comment créer un Switcher d’images uniquement en CSS et sans aucune utilisation de Javascript. Pour cela, nous utiliserons simplement CSS et déclencherons les permutation au survol de lien.

Démo

1°) Ce dont nous avons besoin

4 images
1 éditeur de Code HTML / CSS(j’utilise Aptana IDE)
1 fichier HTML
1 fichier CSS
Connaissances de base HTML/CSS

2°) Trame html – création du layout

La première étape consiste à créer un fichier HTML dans lequel nous allons placer nos images et nos liens.J’ai également lié un fichier CSS à mon document HTML

Code HTML – Fichier de base HTML





CSS Image Switcher



CSS Image Switcher

Il ne reste plus qu’à insérer mon contenu, c’est à dire mes images et mes liens ; J’utilise des blocs ‘

’ comme conteneur principal. J’ai ensuite inséré mes liens pour mes 4 images en veillant à les identifier avec des attributs « ID ».

Code HTML – Création des liens dans le conteneur principal


 Image 1
 Image 2
 Image 3
 Image 4

3°)Edition du CSS

Nous allons éditer notre code CSS. Je dispose de 4 images qui ont les mêmes dimensions (256×192). L’idée est de faire en sorte que les liens se chevauches, il faut donc appliquer une position « absolute » à nos liens et lier nos images à nos liens et plus particulièrement les attributs « ID » de nos liens.

Voici le code CSS de notre CSS Switcher :

Code CSS :

/** Conteneur principal */
#wrapper{
 width:256px;
 margin:10px auto;
 position:relative;
}

/** Liens **/
#wrapper a{
 display:block;
 width:256px;
 height:192px;
 position:absolute;
}

/** Liaison des liens et des images */
#img1{background-image:url(img/img1.jpg);}
#img2{background-image:url(img/img2.jpg);}
#img3{background-image:url(img/img3.jpg);}
#img4{background-image:url(img/img4.jpg);}

Vous pouvez voir le résultat obtenu en figure 3.1.1 :

Figure 3.1.1 - Résultat après édition des liens

Reste à savoir comment nous allons pouvoir donner un effet de switch au survol de nos liens et comment séparer ces différents liens…

La première étape va consister à modifier nos liens en englobant nos libellés de lien dans des balises ‘’ qui vont nous permettre de réaliser des décalages entre nos liens car, comme vous avez pu le remarquer, nos liens se chevauchent et apparaissent au dessus des images.

Code HTML des liens :


 Image 1
 Image 2
 Image 3
 Image 4

Nous pouvons maintenant décaler nos liens avec notre feuille de style :

Code CSS des élément ‘’ :

/** Mise en forme des libellés de liens */
#wrapper a span{
 position:absolute;
 text-align:center;
}

/** Positionnement des libellés de liens */
#img1 span{left:0;top:200px;}
#img2 span{left:128px;top:200px;} /** Décalage 'left' à la moitié du div Wrapper */
#img3 span{left:0;top:225px;}
#img4 span{left:128px;top:225px;} /** Décalage 'left' à la moitié du div Wrapper */

Notre Switcher prend forme comme vous pouvez le voir en figure 3.1.2 :

Figure 3.1.2 - Résultat après édition CSS des libellés de liens

Reste la dernière étape… celle qui va déclencher l’effet de switch au survol des liens ; pour cela, il existe une propriété CSS très pratique, la propriété « z-index ».

La propriété de feuille de style css z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.

Nous avons juste à appliquer cette propriété à l’attribut CSS :hover de nos liens

/** Appliquer le z-index pour l'affichage des images */
a:hover{z-index:1;}

Le résultat final vous permettra de permuter vos images au survol du lien (figure 3.1.3). Vous pouvez encore améliorer la présentation si vous le souhaitez

Figure 3.1.3 - Résultat Final

4°) Conclusion

Vous venez de voir comment créer une permutation d’images en CSS. Il est vrai que JavaScript se démocratise et que de nombreuses bibliothèques permettent de mettre en place facilement ce type d’effet. Cela dit, cette méthode CSS reste légére et vous permet de voir en pratique l’utilisation de la propriété z-index.

5°) Ressources

Propriété z-index sur zone CSS

Ressource du tutoriel (Images + fichiers HTML et CSS) – css-images-switcher.zip

Les bonnes pratiques du WEB

Steve Leherpeux — Thu, 24 Jun 2010 05:54:06 +0000

Je vous propose à travers cet article de mettre en avant les bonnes pratiques du WEB et plus particulièrement lors de la rédaction de notre code HTML. Que vous soyez débutant ou non, il est important de respecter de normes de développement, ceci ne rendra votre travail que plus facile – Relecture du Code, modification, passassions de projets, etc.

1°) Fermez vos balises

La fermeture des balises est une chose essentielle ! Même si vos balises ne l’imposent pas, faites le !

Pas bon

Element 1
Element 2
Element 3

Bon


 Element 1
 Element 2
 Element 3

La fermeture des balises est essentielle, ceci vous évitera des problèmes de validation.

2°) Choisir et renseigner le DOCTYPE

La Document Type Definition (DTD), ou Définition de Type de Document, est un document permettant de décrire un modèle de document SGML ou XML. Le modèle est décrit comme une grammaire de classe de documents : grammaire parce qu’il décrit la position des termes les uns par rapport aux autres, classe parce qu’il forme une généralisation d’un domaine particulier, et document parce que on peut former avec un texte complet.

Source Wikipedia.

Pour faire court, si votre DOCTYPE n’est pas correctement renseigné, voir, pas renseigné du tout, il en résultera des problèmes de lecture de vos pages WEB ; On peut cité entre autre des mauvaises interprétations CSS qui on pour effet l’effet inverse de ce que vous attendez…

La plupart d’entre nous vont choisir entre quatre différents doctypes lors de la création de nouveaux sites Web.

Reste à savoir quel DOCTYPE utiliser… beaucoup de développeurs vous dirons qu’il faut utiliser un DOCTYPE XHTML 1.0 Strict mais ceci n’est pas sans poser de problèmes ; en effet, tous les navigateurs ne réagissent pas encore de la même façon et comme nous créons des IHM (Interfaces Utilisateur), nous devons avant tout penser à l’utilisateur…

L’utilisation d’un DOCTYPE 4.01 Strict peut s’avérer la bonne solution de transition. A vous de faire vos test et de vous forger votre propre opinion en fonction de ce que vous attendez. Je vous renvoi vers le site du W3C et celui de « POMPAGE.NET » afin que vous puissiez étudier par vous même la situation :

http://www.pompage.net/pompe/doctype/

http://www.w3.org/QA/2002/04/valid-dtd-list.html

3°) Pas de CSS dans vos balises WEB

Ceci peut être tentant d’ajouter dans vos balises des informations de style :

Information importante : Il est important de ne pas intégrer des informations de style dans vos balise !

Voici quelques raisons du pourquoi…

Ne jamais penser au style dans un premier temps, pensez structure.

Pensez aux futures modifications ; ne serait il pas plus aiser de regrouper toutes vos informations de styles dans un même document ?

Mieux vaut référencer vos balises à l’aide d’une feuille de style :

Code document HTML

Information importante : Il est important de ne pas intégrer des informations de style dans vos balise !

Code document CSS

p.blue{
 color:blue;
}
p.medium{
 font-size:1em;
}
.red{
 color:red;
}

4°) Placez toutes les feuilles de styles dans le header de votre index

Techniquement, vous pouvez placer les feuilles de style où vous voulez. Toutefois, la spécification HTML recommande qu’ils soient placés dans la balise HEAD du document. Le principal avantage est que vos pages se chargent plus rapidement et sont stockées en mémoire.



slDesign - Bonnes pratiques HTML

5°) Insérez vos fichiers javascript en bas

JavaScript est un langage interprété par votre navigateur et non pas côté serveur. Afin d’être sur et certain que vos fonctions JavaScript soient interprétées, il faut s’assurer avant tout que l’ensemble du document soit chargé. Ceci peut paraitre basique, mais vos pages sont lues de bas en haut par votre navigateur et si votre navigateur inspecte une fonction JavaScript qui port sur un élément non encore chargé, cette dernière ne pourra s’exécuter.

Il existe avec jQuery la fonction « $(document).ready(funcion(){}) » qui s’assure que la page soit totalement chargé avant l’exécution de toute autre fonction. Mais si vous ne travaillez pas avec jQuery et que vous avez développé vous même des foncions JavaScript, il est préférable de les lancer en bas de votre document HTML.

6°) Ne pas utiliser JavaScript en ligne

Il y a quelques années de cela, la pratique voulait que l’on insère directement le code JavaScript dans les balises HTML ; Les événement « onClick » était suivi de toutes les actions…

Vous ne devez jamais faire cela. Au lieu de cela, le transfert de ce code à un fichier externe JS et l’utilisation « addEventListener / attachEvent » à « écouter » pour votre événement désiré. Ou, si vous utilisez un framework comme jQuery , il suffit d’utiliser le «clic» méthode.

// Exemple avec jQuery
$(document).ready(function() {
 $("a").click(function() {
  //Ma fonction
 });
});

7°) Valider votre code

Cette étape est très importante. Je vous conseille de la réaliser tout au long de l’avancement de vos projets et non pas une fois que tout est terminé…

Des outils présents dans les navigateurs vous permettent de réaliser ce type d’opération, pour ne citer que l’add-on de mozilla, il y a la barre d’outil du développeur qui intègre un module de validation HTML et CSS

Barre d'outils développeur Mozilla

Menu de validation de la barre d'outils développeurs

8°) Téléchargez et installer Firebug

Ce module complémentaire vous permettra de débugger en temps réel vos applications WEB. Cet outil est indispensable, notamment par le fait qu’il interprète et lit le code généré par JavaScript et Ajax.

Vous trouverez ce module à l’adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843

Firebug vous permettra entre autre :

Inspectez HTML et modifier le style et la présentation en temps réel
Utiliser le débogueur JavaScript le plus avancé disponible pour n’importe quel navigateur
Analyser avec précision l’utilisation du réseau et la performance
Explorer le DOM
Exécuter JavaScript à la volée

Copie d'écran Firebug

Ce n’est pas le tout de l’installer, encore faudra t-il l’utiliser…

Voici une liste de tutoriels portant sur cet outil :

http://www.siteduzero.com/tutoriel-3-31228-firebug-une-merveille-de-plus-pour-firefox.html

http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/

9°) Editez vos balises HTML en minuscule

Il n’y a aucun intérêt à capitaliser vos balises HTML. Dans un souci de relecture veillez à utiliser des minuscules pour vos balises. De même, il n’est pas interdit d’utiliser des majuscules dans vos attributs mais pensez avant tout à respecter une logique

Mauvaise pratique

Bonne pratique

10°) Utilisez les balises ‘H’

Il existe 6 types de ‘Headers’ HTML et il est important de tous les utiliser… je l’avoue, j’utilise essentiellement le 4 premiers

Cela dit, pour des raisons sémantiques et SEO, forcez vous à utiliser ces balises ; chacune d’entre elle sera interprétée selon leur importance.

Balises de titres

CSS3 – Quelques nouveautés en image

Steve Leherpeux — Fri, 23 Apr 2010 05:19:20 +0000

Je suis persuadé que lorsque vous développez un site WEB, vous avez un multitude de logiciels ouverts sur votre bureau ; encore aujourd’hui, j’utilise Gimp pour éditer des images aux coins arrondis. Bientôt, avec CSS3, nous allons pouvoir nous passer d’éditer certaines images et gagner un temps précieux dans le développement de nos sites.

Dans cet article, je vais vous montrer certaines techniques CSS3 qui vous permettront de changer vos méthodes de travail.

CSS3? What’s that?! Qu’est-ce que c’est?!

Je suis sûr que vous avez entendu parler de CSS en général. CSS3 n’est pas très différent, en termes de syntaxe, mais la puissance de CSS3 est beaucoup plus grande. Comme vous le verrez dans ces techniques comment il est possible redimensionner dynamiquement des éléments, créer des ombres de texte, et plus encore!

Voici la définition donnée par le W3C de CSS3 :

CSS3 est le petit nouveau dans la famille feuille de style. Il offre de nouvelles possibilités intéressantes pour créer un impact avec vos dessins, vous permet d’utiliser des feuilles de style plus variés pour des effets de style beaucoup plus puissants et variés.

1°) Les coins arrondis en CSS3

Alors qu’auparavant il était nécessaire de créer des coins arrondis avec des images ou encore utiliser javascript il est désormais possible de faire appel à CSS3 ; Voici le code et le résultat (figure 1) que vous obtiendrez avec la propriété ‘border-radius’ :

Figure 1 - Résultat obtenu avec la propriété corner radius

Vous avez la possibilité de manipuler chacun des coins ; voici un exemple courbant les coins haut gauche et bas droit (figure 2) :

Figure 2 - Coins arrondis sur deux angles

2°) Les ombre sur div en CSS3

Encore une fois CSS3 va nous faire gagner du temps ; fini les DIV superposés et décalés ou encore l’utilisation de javascript pour générer de belles ombres. La propriété ‘box-shadow’ nous permet maintenant de réaliser ce type d’effet (Figure 3)

Figure 3 - Ombre portée sur un DIV

Voici les propriétés de notre élément ‘box-shadow’ :

Décalage horizontal : en négatif le décalage sera à gauche en positif, il sera à droite
Décalage vertical : négatif il sera vers le haut, positif il sera vers le bas
Rayon de flou : par défaut 0, c’est à dire aucun.

3°) Les ombres de texte en CSS3

Voici le code vous pemettant d’implémenter ce nouvel effet CSS3 ; Vous verrez en figure 4 le résultat, la première ligne sert à montrer la différence entre un texte sans ombre et un second avec :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...

Figure 4 - Text shadow

Les propriétés sont les mêmes que pour un DIV.

4°) Les polices de caractères embarquées :

Nous en avons rêvé pendant longtemps, CSS3 l’a fait ! Il est maintenant possible de choisir votre police et de l’utiliser dans vos pages WEB – veillez toutefois à faire attention aux droits d’utilisation, toutes les polices ne sont pas libres de droit. Dans l’exemple suivant, j’ai opté pour la police ‘LIBRE’.

Lorem ipsum dolor sit amet...

Figure 5 - CSS3 et police embarquée

5°) CSS3 et opacité :

Vous pouvez maintenant gérer l’opacité des éléments HTML dans vos feuilles de styles ; Il était déjà possible de réaliser cette opération avec les propriétés CSS ‘opacity’ et ‘filter’. Maintenant la tache est plus facile comme vous pouvez le voir :

La figure 6 vous montre un carré gris dont l’opacité est fixée à 60% :

Figure 6 - Opacité d'un élément

6°) Taille des « background »

Il est maintenant possible d’utiliser la propriété ‘background-size’ ; cette propriété sert à fixer la tailles des backgrounds ce qui était jusqu’alors impossible.

Voici un exemple avec une image dont la taille initiale est de 400px X 566px et ramenée à 50% d’un div dont les dimensions sont de 200px X 200px :

Figure 7 - Propriété Background-size

Attention ! Le résultat ne sera pas le même sur tous les navigateurs ! Pour exemple, Mozilla conserve les proportions de votre image ce qui n’est pas le cas sur Chrome…

7°) Propriétés columns :

Voici une propriété qui vous permet de diviser un DIV en plusieurs colonnes. pour cela, il vous suffit d’en spécifier le nombre.




 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum accumsan mi. Maecenas id dui a magna tempor pretium. Quisque id enim. Proin id tortor. Curabitur sit amet enim vitae quam pharetra imperdiet. Nulla diam ante, pellentesque eu, vestibulum non, adipiscing nec, eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis a nunc. Donec non dui a velit pulvinar gravida. Nunc rutrum libero vel tortor. Duis sed mi eu metus tincidunt ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In purus lorem, aliquam ac, congue ac, vestibulum quis, felis. Aliquam non sapien.

Figure 8 - Propriété colonnes

8°) Bordures ‘images’

Euh… Comment dire ? l’utilité de cette nouvelle propriété est contestable mais elle a le mérite d’exister. Donc, vous allez pouvoir créer des bordures à partir d’images.

Je ne vais pas m’étendre sur cette propriété donc passons tout de suite au code et au résultat :

Figure 9 - Image source

Figure 10 - Résultat d'une bordure 'image'

Les sélecteurs CSS3

Je n’ai pas d’exemple imagé, sachez simplement que de nouveaux sélecteurs font leur arrivée dans vos feuilles de style ; Cela signifie que vous pourrez créer des design encore plus puissants et personnalisés.

Je vous renvoi à l’excellent article parru sur le site www.456bereastreet.com

Je réaliserai un post complet à ce sujet dans les jours qui viennent.

Conclusion

Vous venez de consulter quelques techniques CSS qui vous faciliteront le développement de vos interfaces et design WEB. Malheureusement, il faudra encore attendre un peu avant que ceci soit réalisable sur tous les navigateurs… alors pensez utilisateurs et dites vous bien que de nombreuses personnes n’aurons pas accès à toues ces propriétés.

Vue d’ensemble de la syntaxe CSS 3 Sélecteur
Selector type Sélecteur de type	Pattern Modèle	Description Description
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att^=”val”] E [^ att = "val"]	Matches any E element whose `att` attribute value begins with “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut commence par « val ».
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att$=”val”] E [att $ = "val"]	Matches any E element whose `att` attribute value ends with “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut se termine par « Val ».
Substring matching attribute selector sélecteur de sous-chaîne correspondant à l’attribut	E[att=”val”] E [att = "val"]	Matches any E element whose `att` attribute value contains the substring “val”. Correspond à tout élément E dont l’ `att` valeur de l’attribut contient la chaîne « val ».
Structural pseudo-class Structurels pseudo-classe	E:root E: root	Matches the document’s root element. Correspondances élément racine du document. In HTML, the root element is always the HTML element. En HTML, l’élément racine est toujours l’élément HTML.
Structural pseudo-class Structurels pseudo-classe	E:nth-child(n) E: nth-child (n)	Matches any E element that is the n-th child of its parent. Correspond à tout élément E qui est l’enfant n-ième de son parent.
Structural pseudo-class Structurels pseudo-classe	E:nth-last-child(n) E: nth-last-child (n)	Matches any E element that is the n-th child of its parent, counting from the last child. Correspond à tout élément E qui est l’enfant n-ième de sa mère, à compter du dernier enfant.
Structural pseudo-class Structurels pseudo-classe	E:nth-of-type(n) E: nth-of-type (n)	Matches any E element that is the n-th sibling of its type. Correspond à tout élément E qui est le frère n-ème de sa catégorie.
Structural pseudo-class Structurels pseudo-classe	E:nth-last-of-type(n) E: nth-last-of-type (n)	Matches any E element that is the n-th sibling of its type, counting from the last sibling. Correspond à tout élément E qui est le frère n-ème de sa catégorie, à compter de la fratrie dernier.
Structural pseudo-class Structurels pseudo-classe	E:last-child E: last-child	Matches any E element that is the last child of its parent. Correspond à tout élément E qui est le dernier enfant de son parent.
Structural pseudo-class Structurels pseudo-classe	E:first-of-type E: first-of-type	Matches any E element that is the first sibling of its type. Correspond à tout élément E qui est le premier frère de son type.
Structural pseudo-class Structurels pseudo-classe	E:last-of-type E: last-of-type	Matches any E element that is the last sibling of its type. Correspond à tout élément E qui est le frère dernière de ce type.
Structural pseudo-class Structurels pseudo-classe	E:only-child E: que l’enfant	Matches any E element that is the only child of its parent. Correspond à tout élément E qui est le seul enfant de son parent.
Structural pseudo-class Structurels pseudo-classe	E:only-of-type E: only-of-type	Matches any E element that is the only sibling of its type. Correspond à tout élément E qui est le seul frère de son type.
Structural pseudo-class Structurels pseudo-classe	E:empty E: vide	Matches any E element that has no children (including text nodes). Correspond à tout élément E qui n’a pas d’enfants (y compris les nœuds de texte).
Target pseudo-class Objectif pseudo-classe	E:target E: l’objectif	Matches an E element that is the target of the referring URL. Correspond à un élément E qui est la cible de l’URL de renvoi.
UI element states pseudo-class UI élément Etats pseudo-classe	E:enabled E: activé	Matches any user interface element (form control) E that is enabled. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est activé.
UI element states pseudo-class UI élément Etats pseudo-classe	E:disabled E: personnes handicapées	Matches any user interface element (form control) E that is disabled. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est désactivé.
UI element states pseudo-class UI élément Etats pseudo-classe	E:checked E: checked	Matches any user interface element (form control) E that is checked. Correspond à tout élément d’interface utilisateur (contrôle de formulaire) E qui est vérifiée.
UI element fragments pseudo-element élément d’interface fragments pseudo-élément	E::selection E:: sélection	Matches the portion of an element E that is currently selected or highlighted by the user. Correspond à la partie d’un élément E qui est actuellement sélectionné ou mis en valeur par l’utilisateur.
Negation pseudo-class Négation pseudo-classe	E:not(s) E: pas (s)	Matches any E element that does not match the simple selector s. Correspond à tout élément E qui ne correspond pas à la simple sélection de l’art
General sibling combinator Générale frère combinateur	E ~ F E ~ F	Matches any F element that is preceded by an E element. Correspond à tout élément F qui est précédé par un élément E.

Astuce : Intégrer du son natif grace au HTML 5

Steve Leherpeux — Sun, 18 Apr 2010 07:26:47 +0000

Comme Firefox 3.5, Chrome 3, Opera 10.5, et Safari 4, nous pouvons tirer profit de la plupart des nouvelles fonctionnalités de HTML 5, y compris le soutien audio natif sans avoir besoin de Flash. Comme vous le verrez, nous seulement pour créer l’élément nouvelle, et a fixé un peu d’attributs. Dans cette recommandation de quatre minutes de vidéo rapide, nous passerons en revue la majoration, et aussi un moyen rapide pour lire des fichiers audio avec jQuery.

L’élément audio HTML 5

L’élément audio accepte une poignée d’attributs, notamment:

autoplay : IAutostart: joue immédiatement le fichier lors du chargement de la page.
controls : Contrôles : Affiche le lecteur sur la page.
preload : Préchargement : commence immédiatement mise en mémoire tampon le fichier. (Valeurs = none, auto, les métadonnées)
src : src: Le chemin vers le nom de fichier. C’est une bonne pratique pour charger le fichier via l’enfant « source » élément à la place.

Mozilla et WEBKIT ne se sont pas entendu en ce qui concerne le format audio ; Mozilla souhaite favoriser le format ‘ogg’ tandis que WEBKIT souhaite lire les fichiers au format ‘mp3′. Cela signifie que, au moins pour le moment, vous devez créer deux versions audio. Je vous recommande d’utiliser un outil en ligne simple et rapide, appelé Media.io , de convertir vos fichiers MP3 vers le format ogg.

Voici le résultat obtenu par défaut dans un navigateur Firefox (figure 1)

Figure 1 - Rendu lecteur HTML 5

Implémentation avec jQuery

Nous allons voir comment il est possible d’utiliser les propriétés de la balise ‘’ avec jQuery. Vous trouverez ci-dessous le code qui permet de créer un lecteur à partir d’un lien :



suhov-skunn

Cet exemple est volontairement simple, il est juste présent pour vous montrer les différentes possibilités qui s’offrent à vous ; Nous aurions pu implémenter cet exemple en générant des liens dynamiques depuis un script PHP et définir les sources dans un attribut ‘rel’.

Compléments

Tous les navigateurs (selon version et moteur) ne supportent pas cette balise ; n’oubliez pas de le notifier dans votre tag :

 Your browser does not support the audio element.

Vous pouvez également utiliser le plugin jQuery « jPlayer » ; Ce plug-in utilise HTML 5 si Flash n’est pas pris en charge et fonctionne sur tous les navigateurs.

CSS3 : Dégradés natifs

Steve Leherpeux — Fri, 16 Apr 2010 06:54:26 +0000

La création d’une image uniquement dans le but d’afficher un gradient est inflexible, et devient rapidement une mauvaise pratique. Malheureusement, au moment d’écrire ces lignes, ils pourraient très bien être encore nécessaires, mais j’espère pas pour longtemps. Merci à Firefox et Safari / Chrome, nous pouvons maintenant créer des gradients puissants avec un effort minimal. Dans cet article, nous allons examiner les différentes façon d’implémenter des dégradés à l’aide de CSS 3.

Introduction :

Dans cet article, nous allons voir comment implémenter des dégradés en CSS 3 à travers des exemples concret. Les techniques pour réaliser ces opérations ne sont pas les mêmes qu’il s’agisse de navigateurs Safari – Chrome / Firefox. Pour réaliser ces dégradés, j’ai simplement créé un bloc ‘DIV’ avec un id ‘gradient’.

Ce que vous devez savoir : Connaitre les bases du HTML et du CSS

Ce que vous devez avoir : Un éditeur HTML

Les dégradés CSS sous Mozilla :

Vous trouverez ci dessous le code qui permet de réaliser un beau dégradé en CSS 3 !

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background:#e3e3e3;
 background: -moz-linear-gradient(top, red, green);
}

Figure 2 - Gradient CSS sous Mozilla

Les dégradés CSS sous WEBKIT :

En ce qui concerne l’implémentation des navigateurs développés sous WEBKIT, la technique est un peu différente. Voici le code :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background:#e3e3e3;
 background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
}

Ne vous inquiétez pas si vous avez un peu plus mal au crane en lisant cette syntaxe (moi aussi…) mais rien de bien compliqué :

Quel type de gradient? (Linéaire)
Axes X et Y les coordonnées de l’endroit où commencer. (0 0 – ou un coin en haut à gauche)
Axes X et Y les coordonnées de l’endroit où la conclusion (0 à 100% – ou le coin en bas à gauche)
Quelle couleur pour commencer? (À partir de (rouge))
Quelle est la couleur de conclure ? (À (bleu))

Les dégradés Partiels :

Il est possible de mettre en place un dégradé partiel ; je vous livre le code qui vous permettra de réaliser cet effet :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background :#9e7e48;
 /* Navigateurs Safari */
 background: -webkit-gradient(linear, 0 0, 0 10%, from(#672907), to(#9e7e48));
 /* Navigateurs Mozillas */
 background : -moz-linear-gradient(top, #672907, #9e7e48 20%);
}

Comme vous pouvez le constater, il devient très simple de mettre en place des dégradés dans vos sites WEB !

Figure 2 - Résultat d'un dégradé partiel

Dégradés multiples :

Il es également possible de créer des dégradés à n* couleurs ; Voici comment :

#gradient{
 border:1px solid #000;
 height:400px;
 width:600px;
 background :#9e7e48;
 /* Navigateurs Safari */
 background: -webkit-gradient(linear, 0 0, 0 100%, from(#672907), color-stop(10%, #5f0000), color-stop(20%, #9e7e48), color-stop(30%, #672907);
 /* Navigateurs Mozillas */
 background: -moz-linear-gradient(top, #672907, #5f0000 10%, #9e7e48 20%, #672907 30%);
}

Figure 3 - Dégradé multiple

Informations importantes

Utilisez-les autant que vous le pouvez. Même si les utilisateurs de IE auront une couleur unie, je vous encourage à utiliser cette méthode.
IE6/7/8, Opera, Safari 3 et Firefox 3 ne peut pas rendre gradients CSS3. Firefox et les utilisateurs de Safari sont généralement mis à jour régulièrement, ce qui ne devrait pas poser de problème.
Appliquez toujours une couleur par défaut, la couleur solide en arrière-plan pour les navigateurs qui ne comprennent pas les différents préfixes de dégradés.
Ne jamais utiliser un rouge à dégradé bleu, comme je l’ai fait pour les exemples (C’est moche ).

Ressources :

Article sur les dégradés sous Mozilla très complet : http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

CSS références pour Mozilla (en anglais) : https://developer.mozilla.org/en/CSS_Reference

CSS références pour WEBKIT (en anglais) : http://webkit.org/projects/css/index.html

slDesign » HTML / CSS

Tutoriel HTML 5 : Réaliser une lecteur vidéo personnalisé

Introduction

Théorie…

Les étapes

Etape 1 – Création du document de base

Etape 2 – Intégration de la vidéo

Etape 3 – Etendre le lecteur

Création d’un lecteur vidéo HTML personnalisé:

Théorie

Etape par étape :

Etape 1 – Initialisation du plugin jQuery

Etape 2 – Chargement des feuilles de style

Etape 3 – Construction du wrapper et des contrôles

Etape 4 – Bouton Play / Pause

Etape 5 – Gestion du son

Etape 6 – Gestion du seeker

Etape 7 – Appel du plugin

owPlayer::

Résultat final

Conclusion

Code javascript : owPlayer.js

Code HTML : index.html

owPlayer::

Code CSS : style.css

Remerciements :

Support HTML 5 – La solution pour gérer la compatibilté des navigateurs

Solution Javascript

Commentaires conditionnels

Class Modernizr

Initialisation :

Code HTML

Feuille de style CSS :

Conclusion

Formulaires HTML5 – Quoi de neuf ?

Introduction :

Placeholder attribut :

Avant…

Après…

Autofocus

Avant…

Après…

Attribut Required

Avant…

Aperçu Required avant HTML5

Après…

Résultat attribut HTML5 Required

Champ email & url

Avant…

Check mail avant HTML5 Check URL avant HTML5 Après…

Les nouveaux types de champs :

Conclusion

Speed tuts : local storage ou la sauvegarde locale

I – Introduction & prérequis

II – Création d’un contenu éditable

Code HTML – zone de saisie :

Todo Liste

Utilisation de javascript

Code javascript :

Code complet et ressources :

Code complet du tutoriel :

Todo Liste

Compatibilité

Tutoriel CSS : 3D Transform

I – Introduction

1°) Prérequis

2°) Un peu de théorie...

II - Création d'un cube 3D

1°) Code HTML de base

SpeedTuts : CSS Image Switcher

1°) Ce dont nous avons besoin

CSS Image Switcher

3°)Edition du CSS

4°) Conclusion

5°) Ressources

Les bonnes pratiques du WEB

1°) Fermez vos balises

2°) Choisir et renseigner le DOCTYPE

3°) Pas de CSS dans vos balises WEB

4°) Placez toutes les feuilles de styles dans le header de votre index

Check mail avant HTML5

Check URL avant HTML5

Après…