slDesign

Tutoriel WordPress : Introduction à la création d’un thème WordPress personnalisé

Steve Leherpeux — Mon, 04 Oct 2010 10:32:50 +0000

Depuis quelques temps maintenant que je travaille sur WordPress comme base de mes développements Web, j’ai appris à utiliser ce moteur de blog, installer des extension et même en développer.

WordPress est certes un outil puissant utilisable comme moteur de Blog mais également comme base à la réalisation de sites Web Dynamiques ou de sites vitrines. Tous les blog WordPress sont réalisés sur la même base et pourtant, ils sont presque tous différents.

Je vous propose de partager avec moi une étape primordial qui fera de votre Blog un Blog unique, la création d’un thème personnalisé.

Infos :

Version du document : 0.1

Sommaire :

Page 1 – Introduction
Page 2 – Préparation
Page 3 – Création d’un thème
Page 4 – Edition avancée
Page 5 – Affichage des pages
Page 6 – Sidebar
Page 7 – Administration du thème
Page 8 – Personnalisation du thème
Page 9 – Intégration de Widget
Page 10 – Conclusion

I – Introduction

1°) Objet du tutoriel

Cet article à pour objectif de vous apprendre à développer un thème complet pour WordPress. A la fin de ce didacticiel, vous serez (normalement) en mesure de réaliser un Template 100% personnalisable.

Cet article est amené à évolué, il sera mis à jour en fonction des commentaires et améliorations apportées à ce dernier.

Ce tutoriel est une introduction à la création de thème WordPress.

Ce que n’est pas ce didacticiel :

Ce didacticiel n’a pas pour vocation de vous apprendre à développer en CSS, HTML, PHP. Ces langages sont utilisés et vous devez donc les maîtriser.

Ce n’est pas une introduction à WordPress. Vous devez connaitre ce moteur de Blog, savoir l’installer et installer des extensions.

Cet article n’abordera pas en détail l’intégration graphique au sein de WordPress.

2°) Pré-requis

PHP : Bonnes connaissances requises
CSS : Très bonne connaissance
JavaScript : Très bonne connaissances
WordPress : Bonne connaissance

3°) Editeur de code et outils de programmation

Editeur de Code HTML / PHP / JavaScript / CSS

Certes, il vous est possible de suivre ce tutoriel avec un simple éditeur de texte… mais je vous conseille d’utiliser un puissant éditeur de code pouvant supporter les langages suivants :

PHP
HTML
CSS
JavaScript / jQuery

Pour ma part, j’utilise Aptana Studio disponible à l’adresse suivante http://www.aptana.com/ et qui intègre un ensemble d’outils vous permettant de développer des sites Web dynamiques HTML / PHP / JAVASCRIPT.

Un éditeur vous permettra d’accéder à différentes fonctions qui me semblent indispensables :

Coloration syntaxique
Indentation
Numérotation de lignes
Recherche de documentation

Firefox et extensions pour développeurs

Firefox est bien plus qu’un navigateur Web… il permet également d’accéder à de nombreux outils utiles aux développeurs.

Extension Web Développer pour Firefox : Cette extension ajoute un menu à Firefox vous permettant d’avoir accès à différents outils :

Gestion des cookies
Manipulation et affichage des feuilles de style css
Informations sur les images
Informations sur les formulaires
Outils de validation HTML / CSS (W3C)

Site web de l’extension : http://chrispederick.com/work/web-developer/

Extension Firebug :

Firebug est une extension primordial pour le développement de sites Web. Contrairement à la barre de développement “Web Développer” cette extension est orientée ‘client’; il est ainsi possible d’analyser le code généré côté client par JavaScript.

4°) Ressources et documentations

Voici une liste de liens utiles ; je vous encourage vivement à les consulter avant de commencer et de les avoirs dans vos favoris :

http://codex.wordpress.org/Developer_Documentation – Documentation WordPress à l’attention des développeurs

http://codex.wordpress.org/Theme_Development – Documentation spécifique aux développement de thèmes

Il est important de bien appréhender les notions techniques de WordPress et notamment cette page : http://codex.wordpress.org/Plugin_API ; cette dernière vous apportera de nombreuses information sur l’API WordPress qui est à la base des développement autour du moteur de Blog.

5°) Introduction à l’API WordPress

Sans entrer dans les détails, je vais vous présenter en quelques lignes l’API WordPress. Une API vous permet d’interagir avec WordPress. Vous entendrez parler de HOOK

Il existe deux types de HOOK :

Les filtres
Les actions

Les filtres sont des événements que WordPress lancent afin de modifier des textes de différents types avant de les insérer dans la base de données ou de les afficher à l’écran

Les actions sont des événement que WordPress lance à des moments spécifique de leur exécution.

Ces éléments ne sont pas directement utilisés dans les thèmes mais principalement dans les plugins et widgets qui y sont intégrés

Les LOOPS sont utilisés par WordPress pour afficher chacun de vos articles.

La syntaxe de base est la suivante :

6°) Informations utiles

WordPress est installé en local chez moi sur un serveur LAMPP. OS Windows. J’utilise l’éditeur de Code Aptana Studio. Le rendu est réalisé sur Firefox. Il sera donc nécessaire de rendre ce code compatible avec d’autres navigateurs WEB.

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

DimDim : Solution de Web Conferencing

Steve Leherpeux — Thu, 02 Sep 2010 09:55:00 +0000

Dimdim (www.dimdim.com) est une application Open Source de réunion à distance (aussi appelée web conferencing) permettant de communiquer en direct par Internet, sans avoir à installer de logiciel sur son poste de travail. La conférence mixe tableau blanc, partage de documents (tels qu’une présentation PowerPoint ou Impress), VoIP et vidéo.

Je vais vous présenter dans cet article cette solution qui ne manque pas d’atouts.

Introduction

DimDim est donc un service de “Web Conferencing” au même titre que Webex ou Office Live Meeting. Cette solution est “Full Web”, vous n’avez donc aucun besoin de télécharger ou d’installer un logiciel.

Si vous pouvez afficher une page Web, vous pouvez utiliser Dimdim, tout ce qui est nécessaire est un navigateur web. Partagez vos documents, les webcams, les pages Web, des tableaux blancs, transférer le contrôle de plusieurs présentateurs – même enregistrer vos rencontres avec Dimdim Pro – le tout sans installer le moindre logiciel. Et jusqu’à 1000 personnes peuvent se rencontrer avec Dimdim Webinar.

Pour qui ? Pour quoi ?

DimDim est une solutions qui peut s’adapter à de nombreux besoins

Vente & Commerce
Education / Formation
Markéting
SAV – HotLine Desk Help

Fonctions

Partage de desktop
Pointeur lazer
Zoom et annotations
Widget de registration
Enregistrement et diffusion Web des meetings
Simulation de Paper Board
Fonction de partage sur les réseaux sociaux

DimDim en action

J’ai réalisé un petit test que vous pouvez suivre et réaliser si vous le souhaitez

Etape 1 – Inscription

J’ai choisi de réalisé cette démonstration sur la version PRO. Il suffit de s’enregistrer s’enregistrer ; un simple formulaire vous permettra de réaliser cette opération.

Vous pouvez ensuite vous identifier, une mise à jour du plugin vous sera demandée, cette opération ne requiert aucune compétence particulière, suivez juste les étapes. Une fois l’installation terminée, vous remarquerez qu’un nouvel icône vient de prendre place dans la barre de tâches. Un clic droit sur cet icône vous permet d’accéder au menu contextuel :

Etape 2 – Interface DimDim

Deux options se présentent à vous :

Planifier une conférence Web
Commencer une conférence

L’interface de planification vous permet de renseigner une conférence à venir. Entrez quelques informations, la liste des participants à inviter en saisissant leurs emails, une clef d’accès puis valider.

Une invitation est ensuite envoyées aux différents participants.

Une fois en route, l’organisateur peut accéder à son interface et choisir l’action à réaliser :

Partager son écran
Partager un tableau blanc
Partager des documents

L’interface de l’organisateur est composée de différents modules :

Un chat public
Webcam
Liste des participants

Vous pouvez également basculer d’un mode à un autre très facilement :

Tarifs

Les tarifs varient de 0€ à 65€ /mois en fonctions des services et nombres d’utilisateurs.

La version la plus complète “Business” est à un tarif de 33€ / utilisateur et par mois et comprend les services suivants :

Premium & Team Features

4 video cameras
Custom Branded Rooms
Public & Private Meetings
Store, Share 4+ GBs of files
Conduct Live Polls
Premium Support

Advanced Collaboration Tools

Record & Embed Events
Registration Widgets
Basic Reports
App & Region Sharing

Group Management

Optional 1000 Person Event Room
Advanced Analytics
Advanced Event Reporting
Poll Reporting

Group Controls

Group Administration
Email & AccountCustomization
Account Reports & Analytics
Custom API Integration
Dedicated Support Services

A titre de comparaison le “Pay Per User” de Webex est à 0.29€ par utilisateur et par minute :/

Conclusion

DimDim est donc une solution très intéressante en terme de rapport qualité prix. Les fonctionnalités sont nombreuses est les outils connexes très intéressants. La version gratuite est certes limitée mais elle conviendra à une utilisation basique telle que de l’assistance ou des formations simples pour PME.

Ressource Web : Un générateur d’image de pré-chargement

Steve Leherpeux — Thu, 02 Sep 2010 09:52:00 +0000

Si tout comme moi il vous avez déjà eu besoin de réaliser une image de pré-chargement, vous savez que ce travail peut être assez fastidieux.

J’ai découvert depuis peu un service en ligne permettant de générer des images de pré chargement.

L’interface est très simple et vous pouvez télécharger rapidement de beaux gifs animés pour informer vos visiteurs du chargement de vos pages, images ou autres médias.

La première étape consiste à sélectionner un modèle parmi la quarantaine proposée.

Choisissez la couleur de fond (ou optez pour un fond transparent) puis choisissez la couleur du preloader.

Reste à générer puis télécharger l’image générée…

En somme, un outil utile, simple. Voici l’adresse de l’application : http://www.ajaxload.info/

Des milliers de tutoriels en Français et sur toutes les applications

Steve Leherpeux — Tue, 24 Aug 2010 17:12:48 +0000

Si vous cherchez des tutoriels Français et que vous ne trouvez pas votre bonheur sur les ressources gratuites, voici un site qui pourra vous aider !

tuto.com vous permet de consulter des centaines de tutoriaux gratuits et des milliers d’autres pour quelques euros !

Je vous propose dans cet article de vous présenter les différents services et avantages de tuto.com.

Tuto.com c’est quoi ?

Tuto.com est une place de marché dédiée aux tutos informatiques en vidéo. Chacun peut y apprendre à utiliser un logiciel ou bien partager ou vendre un savoir-faire informatique. Apprenez pas à pas, à votre rythme et visionnez les vidéos sans limite de temps, parmi un catalogue de 10816 tuto. tuto

Fonctionnement

Le système est basé sur des crédits, qui représentent la monnaie de tuto.com. Il est à noter que vous pouvez également avoir accès à des centaines de tutoriaux gratuits sans achat de crédits mais simplement en vous inscrivant.

Après vous être inscrit, vous aurez accès au catalogue de formation et pourrez également acheter des crédits.

Comment fonctionnent les crédits ?

1 crédit = 1 euro. Acheter des crédits, vous permet de les utiliser pour télécharger les formations vidéo qui vous intéressent. En achetant un forfait de crédits, vous remplissez donc une tirelire virtuelle avec laquelle vous pourrez acheter des vidéos de formation, simplement et rapidement.

Formez-vous grâce à + de 10800 vidéosUne fois vos crédits en poche, vous pouvez vous former immédiatement au logiciel de votre choix, grâce à un catalogue de plus de 10800 vidéos de formation qui s’enrichit quotidiennement.
Téléchargement des vidéos immédiatAprès avoir acheté des crédits, vous pourrez immédiatement les utiliser pour télécharger les vidéos qui vous intéressent et ainsi débuter votre formation sans attendre !
Lecture illimitée des vidéosUne fois les vidéos téléchargées, vous pouvez les lire de façon illimitée dans le temps, sans avoir besoin d’être connecté sur Internet. Vous vous formez à votre rythme, pas à pas.
Aucun engagement sur la duréeChez Tuto.com, nous pensons que c’est la qualité de nos vidéos qui vous retiendra. Nous ne proposons donc pas d’abonnement. Vous ne payer que pour ce que vous consommez.

Acheter ou Vendre ?

Sur Tuto.com, vous avez 2 types d’utilisateurs: ceux qui souhaitent se former à un logiciel et ceux qui souhaitent partager leurs connaissances sur un logiciel. Sur Tuto.com, vous trouverez des cours en vidéo dédiés aux logiciels de bureautique, de 3D, de vidéo, du web, de programmation, de traitement de l’image, du print… Certaines vidéos sont gratuites, d’autres payantes.

Si vous maitrisez un logiciel, Tuto.com vous permet de gagner de l’argent. Enregistrer un tutorial vidéo et soumettez-le nous. Il sera alors validé par notre équipe et sera mis en vente.

Conclusion

tuto.com est un service complet de tutoriaux vidéos qui vous permettra de trouver de nombreuses ressources de qualités professionnelles ou encore publier vos tutoriaux.

De nombreux logiciels et thématiques y sont abordés, de PHP à .net, de Photoshop à Gimp ou encore de 3D Studio Max à Blender.

N’hésitez pas à vous inscrire et profitez des nombreuses ressources gratuites pour vous faire votre propre avis.

Mozilla sort Firefox 4

Steve Leherpeux — Mon, 16 Aug 2010 09:42:30 +0000

Mozilla a mis à disposition du public la deuxième beta de Firefox 4.

A propos de cette version :

Il s’agit du deuxième Firefox 4 Beta, basé sur la plate-forme Gecko 2.0 Web. Cette Firefox 4 Beta est considéré comme stable et sûre à utiliser pour naviguer sur le Web tous les jours, si les caractéristiques et le contenu peuvent changer avant la version finale du produit.

Avant la réalisation du test, je vous fais part des différentes modifications apportées et publiées sur le site de Mozilla.

Quelques nouveautés :

Firefox 4 Beta 2 est disponible en 24 langues .
Les onglets sont désormais sur le dessus par défaut sur Windows et OSX – Linux va changer lorsque le thème a été modifié pour supporter le changement.
Vous pouvez activer un onglet dans un onglet "App" par un clic droit dessus et en sélectionnant "Faire en App Tab" dans le menu contextuel.
Les développeurs Web peuvent animer le contenu en utilisant CSS Transitions .
La réactivité et l’amélioration du défilement.
Améliorations de la vitesse JavaScript due à des optimisations du moteur .
Les changements à la façon dont les composants XPCOM sont enregistrés afin d’aider les temps de démarrage et de la séparation processus.
Voir la liste de modifications complète de la version bêta précédente .

En plus de ces fonctionnalités des précédentes versions bêta de Firefox 4:

Vous pouvez rechercher et passer à onglets déjà ouverts dans la barre d’adresse intelligente
Addons Nouveau gestionnaire d’extension et de la gestion API (interface utilisateur sera modifiée avant la version finale)
Importantes améliorations API sont disponibles pour JS-ctypes, une interface de fonction étrangère pour les extensions.
L’arrêt et les boutons de recharge ont été fusionnés en un seul bouton sur Windows, Mac et Linux.
La barre des signets a été remplacé par un bouton de signets par défaut (vous pouvez le réactiver si vous voulez).
Protection contre les chocs pour Windows, Linux, Mac et quand il ya un accident dans le Flash d’Adobe, Apple Quicktime ou Microsoft Silverlight plugins.
Transitions CSS sont partiellement pris en charge.
Full WebGL support est inclus, mais désactivé par défaut pour le moment.
Core Animation modèle de rendu des plugins sur Mac OS X. Plugins qui a également l’appui de ce modèle de rendu peuvent maintenant tirer rapidement et plus efficacement.
Prise en charge native de la HD HTML5 Webm format vidéo.
Un Direct2D expérimentale rendu backend est disponible sur Windows, désactivé par défaut.
Les développeurs Web peuvent utiliser Websockets pour une faible complexité, de faible latence, les communications bidirectionnelles API.
Les développeurs Web peuvent mettre à jour le champ URL sans recharger la page en utilisant les API Histoire HTML .
Plus sensibles en utilisant la page de rendu construction à ossature de paresseux .
recherche historique Link se fait de manière asynchrone pour assurer une meilleure réactivité lors pageLoad.
CSS: les sélecteurs visités ont été modifiées pour bloquer les sites Web d’être en mesure de vérifier l’historique de navigation utilisateur un .
Nouvelle HTML5 analyseur .
Support pour plus d’HTML5 contrôles de formulaire.

Source : http://www.mozilla.com/en-US/firefox/4.0b2/releasenotes/

Téléchargement

Vous pouvez télécharger la dernière beta de Firefox 4 à cette adresse ou directement sur leFTP de Mozilla.

L’installation n’écrasera pas votre version actuelle de Firefox

Desktop Application : Les alternatives WEB

Steve Leherpeux — Sun, 15 Aug 2010 08:28:48 +0000

Si vous bougez souvent, que vous avez plusieurs systèmes d’exploitations voir plusieurs PC il existe des solutions hébergées vous permettant de remplacer les logiciels courant que vous pouvez utiliser tel que Word, Power Point et d’autres.

Le cloud computing prend de plus en plus d’improtance et je vous propose un petit tour d’horizon de ces solutions.

Sliderrocket

Remplace : PowerPoint

SlideRocket est un logiciel de présentation qui vous permet de créer, éditer et publier vos présentations, diaporama, etc. Il dispose de toutes les fonctionnalités présente dans la solution de Windows Office :

Création de diaporama
Ajout de médias et fichiers Flash
Création de transitions
Ajout de graphiques
Imports de documents PowerPoint

Si vous êtes un utilisateur de Google Apps, vous pouvez ajouter l’intégration SlideRocket via le Marketplace Google Apps .

Cette application dispose de nombreuses fonctionnalités ainsi que la possibilité d’y lier des plugins pour étendre le logiciel.

Vous pouvez également installer en local de “Desktop Presenter” :

Le SlideRocket Desktop Presenter vous permet de synchroniser des présentations à partir de votre compte en ligne sur votre bureau en vous permettant de présenter lorsque vous êtes en déplacement ou sans accès à une connexion Internet.

Les prix :

À partir de 12 $ par mois pour les particuliers, les prix SlideRocket est correcte si vous êtes un utilisateur fréquent de présentations. La vraie question, cependant, est de savoir si oui ou non les fonctionnalités offertes justifieront le prix mensuel par rapport à une application de bureau.

Ressources :

Website : http://www.sliderocket.com/
Blog : http://www.sliderocket.com/blog/
Démos : http://www.sliderocket.com/product/demos.html

Acrobat.com

Remplace : Microsoft Office, Adobe Acrobat

Cette solution est éditée elle même par Adobe.

Simplifiez votre manière de travailler. Configurez des espaces en ligne afin d’y stocker un ensemble de documents et de les partager avec plusieurs personnes. Créez des documents, des tableaux et des présentations en ligne et collaborez dessus. Convertissez facilement des documents au format PDF et hébergez des réunions sur le Web.

Fonctionnalités / Avantages:

Espaces en ligne

Partagez un ensemble de documents en un seul endroit

Collaborez avec plusieurs personnes à la fois

Partagez votre espace de travail en ligne

Stockage et partage documents

Partagez des documents avec d’autres personnes tout en gardant le contrôle

Accédez à vos documents où que vous soyez

Intégration aisée de fichiers dans votre site Web, votre site Wiki ou votre blog

Conversion au format Adobe PDF en ligne

Conversion aisée d’un fichier au format PDF en ligne

Conférence Web

Accès instantané où que vous soyez.

Recréez, en ligne, l’environnement des réunions en personne

Demandez le contrôle à distance de l’ordinateur d’un autre utilisateur

Applications bureautiques en ligne

Possibilité de travailler ensemble et en même temps

Une seule version, toujours actualisée

Accès instantané où que vous soyez

Accès mobile

Transfert de documents vers Acrobat.com à l’aide de la caméra d’un téléphone mobile

Affichage et partage de fichiers Acrobat.com à partir d’un téléphone mobile

Les prix

A partir de 14,99$ / Mois. Ce tarif semble raisonnable au vu des possibilités offertes pas la solution.

Aviary

Remplace : Adobe Photoshop, Illustrator, Soundbooth

Aviary est une suite d’outils online. Vous pourrez entre autre :

Editer vos image et vos sons

Créer de la musique

Réaliser des captures d’écran

Création de

Ces applications sont très puissantes et faciles à prendre en main.

Certaines de ces applications peuvent êtres considérées comme des gadgets mais il n’e reste pas moins que ces outils sont impressionnants. L’éditeur d’images est tout simplement étonnant ! Certes, ne vous attendez à avoir les mêmes fonctionnalités que sur The Gimp ou Photoshop mais allez jeter un coup d’œil

Mint

Remplace : Money, Quicken

Mint est un gestionnaire de finances personnel au même titre que Money ou Quicken.

Mint est un outil très populaire finances personnelles qui vous permet de suivre vos transactions par carte de crédit, le solde de votre budget, et de créer des diagrammes ou des graphiques pour vous aider à visualiser vos dépenses. Mint est la façon gratuite et sécurisée pour gérer votre argent en ligne.

Mint est également disponible en tant qu’application pour SmartPhone.

JayCut

Remplace : Windows Movie Maker

JayCut est très facile à utiliser et puissant éditeur de vidéo en ligne. Avec Jaycut, vous pouvez créer des vidéos avec les mêmes outils utilisés dans les programmes de bureau. Ajouter des clips, des transitions, audio, effets, et plus avec leur simple interface utilisateur.

Lorsque vous avez terminé l’édition d’un vidéo, vous pouvez choisir de télécharger ou de l’exporter directement vers YouTube. Exporter jusqu’à 20 vidéos par mois avec 2 Go de stockage en vertu d’un plan libre, ou de payer par mois avec un meilleur plan.

WobZip

Remplace : Logicels de compéssion et d’archivage.

Wobzip est un outil en ligne gratuit qui vous permet de décompresser vos fichiers en ligne.

Il utilise un antivirus pour les vérifications de sécurité et p7zip comme logiciel de décompression.

Vous pouvez ainsi décompresser une archive allant jusqu’à 100MB et dans les formats suivants :

7z, ZIP, GZIP, BZIP2, TAR, RAR, CAB, ISO, ARJ, LZHCHM, Z, CPIO, RPM, DEB and NSIS

Vous pouvez ainsi orienter les personnes à qui vous avez envoyé une archive vers cette solution qui leur permettra de décompresser le dossier sans se soucier du format ou du logiciel à utiliser.

ZamZar

Remplace : Logiciels de conversions de formats

ZamZar est une solution de conversion de fichiers en ligne. Cette solution va vous permettre par exemple de convertir un document office *.doc dans différents formats (*.pdf, *.tiff, *.jpeg). Vous pourrez également convertir vos MP3 en *.ogg et ceci sans installer un seul logiciel ! Vous trouverez l’ensemble des formats de conversion à cette adresse : http://zamzar.com/conversionTypes.php

L’opération est simple :

Sélectionnez votre fichier
Sélectionnez le format de conversion
Renseignez votre email pour la réception du document
Valider

Un service de gestion de fichier est également proposé aux utilisateurs enregistrés ce qui permet de gérer directement les conversions dans une interface dédiée.

Hulu

Remplace : Logiciel et Carte TV

Je ne vais pas trop entrer dans le détail de cette solution car elle n’est à ce jour disponible que pour les US… mais sachez que Hulu est un site qui propose le streaming vidéo, d’émissions télévisées et films populaires aux États-Unis.

Note : Vous pouvez tout de même accéder à Hulu hors US… en passant par un proxy. Ceci n’étant pas le sujet de cet article, je vous laisse fouiller un peu sur les différentes solutions pour simuler une localisation aux USA.

Meebo

Remplace : Logiciels de messageries instantanées

Avec Meebo, vous pouvez chatter avec vos amis de n’importe où, tant que vous disposez d’un navigateur et une connexion Internet. Meebo est un outil en ligne qui permet de vous connecter à un réseau majeur de la GI, y compris AIM, MSN, GTalk, et Facebook. Vous n’avez même pas besoin de créer un compte, il suffit de saisir vos informations de messagerie instantanée et vous êtes prêt à partir. Si vous prenez les 20 secondes pour créer un compte Meebo, vous pouvez vous connecter à plusieurs comptes à la fois. Plus pratique que le téléchargement et la gestion de trois programmes de messagerie instantanée à la fois, n’est-ce pas?

TokBox

Remplace : Logiciel de Vidéo Chat

Cette solution vous permet de réaliser des vidéos conférences. Les fonctionnalités sont nombreuse :

Import de contact
Diffuser des vidéos pendant la conférence
Laisser des messages vidéos

Il existe différents niveaux de services allant de la gratuité à près de 40$ / mois pour des services différents :

Les prix sont raisonnables quand on connait ceux d’autres solutions.

Moof

Remplace : iTunes

Vous pouvez avoir une énorme bibliothèque iTunes, mais que se passe t’il quand vous sortez et que vous oubliez d’apporter votre iPod long? Moof est la solution. Moof est une autre application web qui diffuse la musique en ligne, pensée comme une alternative iTunes. Vous pouvez exporter votre bibliothèque iTunes comme un ensemble de fichiers XML et que Moof peut télécharger Moof, vous pouvez donc avoir une sauvegarde complète de votre musique en ligne.

Vous pouvez également obtenir votre musique à partir de Youtube.

ESET Online Virus Scanner

Remplace : Logiciel anti-virus (Scanner)

Attention !!! Ce logiciel ne remplace pas votre logiciel anti-virus ! Cette solution vous permettra néanmoins d’avoir une solution alternative voir complémentaire à votre anti-virus local. Vous pourrez ainsi en cas de défaillance ou de problème spécifique utiliser ESET.

iCloud

Remplace : Système d’exploitation

Nous avons déjà vu ensemble différentes alternatives aux logiciels “Desktop” et nous allons finir en beauté avec la solution définitive… Un système d’exploitation en ligne. Emportez votre bureau et vos application ou que vous soyez et depuis n’importe quel poste informatique, du vrai “Cloud” en somme…

Un système d’exploitation accessible depuis votre smartphone, votre ePC et votre PC de bureau !

Les fonctionnalités et avantages sont nombreux :

Online Storage : Toutes vos données et vos fichiers en un seul endroit et accessibles ou que vous soyez

Productivité :

Calendrier
Office applications
Mails
Contacts
Tâches

Médias

Ecouter de la musique
Regarder des vidéos
Radio
Gérer vos photos / images

Internet :

Collaboration
Navigateurs
News

Développement d’applications : Développez ou étendre les applications iCloud

Prix :

39,99$ pour 100GB d’espace de stockage

Le prix semble raisonnable même si à ce jour nous ne pouvons pas comparer si ce n’est avec des solutions telles que Citrix.

Cette solution ne conviendra pas à tout le monde mais liée à d’autres applications WEB elle synthétise de belle manière ce qui nous attend dans le futur.

Conclusion

Je viens de vous présenter différentes solutions pouvant remplacer vos applications locales, des solutions étonnantes et robustes ; Le monde se tourne vers le Cloud computing et vous venez de voir des exemples concrets de ce qui nous attend et ceci ne représente qu’un aperçu de ce qu’il existe.

N’hésitez pas à faire part de vos expériences sur l’utilisations des solution Web Desktop ou nous présenter d’autres solutions qui valent le détour.

Panorama des solutions d’édition WordPress

Steve Leherpeux — Thu, 12 Aug 2010 21:13:12 +0000

Il peut parfois être intéressant d’éditer son Blog autrement qu’en passant par l’interface de WordPress. Que vous souhaitiez rédiger en mode hors connexion ou encore bénéficier de tous les avantages d’un éditeur de texte.

Je vais vous présenter dans cet article les différentes solutions permettant d’éditer votre Blog autrement qu’avec l’interface prévue à cet effet.

I – Le test

Le test est simple, la redaction d’un article avec incorporation de plusieurs images. Voici l’exemple :

Titre : Test – [Nom solution]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et dictum urna. Nulla in tellus sed lacus bibendum blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed viverra nulla id ante eleifend id adipiscing sapien tristique. Curabitur massa neque, mollis nec congue egestas, sagittis eu nibh. Nam nec vulputate ligula. Nulla mi arcu, eleifend eget accumsan sed, bibendum eget justo. Duis lectus tellus, placerat id ultricies et, fringilla non est. Pellentesque nec orci eget est eleifend ullamcorper.

Titre H2

Suspendisse mauris orci, consectetur non dignissim nec, eleifend vel ipsum. Nullam sagittis, felis eu lacinia commodo, neque nibh ornare nisi, porta vulputate massa ante sit amet orci. Integer placerat sodales lacus, vitae accumsan sapien dictum ac. In non viverra erat. Vivamus sit amet tortor at augue blandit fermentum id in sem.

Titre H3

Sed egestas augue ac nibh blandit consectetur. Nullam at enim ut odio dignissim ornare eu nec tellus. Fusce diam eros, vehicula eget venenatis et, dapibus sed felis. Etiam vel ipsum magna. Cras et ligula nisi. Suspendisse id ante a eros ornare pellentesque. Maecenas nibh tortor, fermentum at porttitor euismod, interdum et neque. Nullam tincidunt porttitor lacus, et fringilla ipsum ullamcorper eget.

Sed scelerisque metus scelerisque dui interdum placerat. Suspendisse ullamcorper, mi at viverra pellentesque, lacus massa adipiscing nibh, a dignissim mauris lectus a lorem. Nullam mattis neque cursus neque feugiat auctor.

Sélection catégorie Article, Infos

Tags, test, WordPress

Info : Ce test est réalisé en liaison avec un Blog WordPress (d’ou le titre) et ne sont testées qu’avec WordPress… Cela dit, ces logiciels sont pour la plupart compatible avec d’autres moteurs de Blog

II – Les solutions

1°) Windows Live Writer

Informations générales :

Adresse du projet : http://www.windowslive.fr/writer/ (Intégré à Windows XP, Vista et Seven)
Plateformes : Windows
Licence / Prix : Gratuit – Intégration Windows

Windows Live Writer est une solutions développée par Windows essentiellement pour éditer votre « Live Blog » mais il est possible d’éditer d’autres solution.

La configuration est simple :

URL
Login
Mot de passe
Nom de blog

Cette solution est très complète ! Parfois, il font les choses bien chez windows…

Quelques remarques :

Le transfert des images se réalise correctement mais en double a priori si enregistrement brouillon + Publication…
Il n’est à priori pas possible d’insérer une légende à une image…

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Oui
Multi-catégories : Oui
Ajout de catégories : Oui
balise “more” : Oui
Tags : Oui, avec fournisseur de mots clef
Images : Oui avec possibilité d’incorporer des albums photos
Propriétés images : Oui + beaucoup d’options + gestion des effets
Mode brouillon : Oui

2°) Sun Weblog Publisher

Informations Générales :

Adresse du projet : http://extensions.services.openoffice.org/fr/project/swp
Plateformes : Windows, Mac, Linux
Licence : Open Source

Cette solution est éditée directement par Sun. Elle s’incorpore en tant que Plug-in dans Open Office Writer.

La prise en main est donc facile mais… oui mais… j’ai rencontré pas mal de soucis :

Duplication : Si vous enregistrez le brouillon, il est nécessaire de fermer votre document puis de recharger depuis « Open WebBlog Entry »…

Images : Transfert OK mais les images sont automatiquement renommées…

Cette solution n’est donc pas assez abouti à mon avis; dommage pour quelqu’un comme moi qui ne travail que sur Open Office.

Comparatif :

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Non
Multi-catégories : Non
Ajout de catégories : Non
Balise “more” : En mode code
Tags : Non
Images : Oui
Propriétés images : Oui, celles de oOo
Mode brouillon : Oui

3°)Scribe Fire

Informations générales :

Adresse du projet : http://www.scribefire.com/
Plateformes : Windows, Mac, Linux
Licence / Prix : Open Source – Gratuit

Scribe Fire est une extension Firefox qui permet de publier du contenu sur votre Blog. Il se présente sous la forme d’un éditeur intégré à Firefox.

L’installation est simple (extension firefox). L’icone jaune représentant l’édition d’une note vous permet de lancer l’éditeur.

Quelques remarques :

Pas de possibilité de manipuler les propriétés d’images
L’édition se fait beaucoup en mode code ( pas de réelle barre d’outil avec les balises HTML)

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Oui
Multi-catégories : Oui
Ajout de catégories : Oui
balise “more” : Oui
Tags : Oui
Images : Oui
Propriétés images : Non
Mode brouillon : Oui

4°) Qumana

Fait plutôt rare pour un logiciel de type Desktop, cet éditeur est Multi-plateforme.

Installation simple et rapide
Paramétrage simple et chargement des articles automatiquement
Interface simple et efficace

Malheureusement, il manque certaines fonctionnalités à cette solution :

Légende sur les images
Gestion des vidéos et médias
Certains tags

On notera la présence d’un bouton “Insert ad” permettant l’insertion de publicité AdGenta. Le transfert des images se fait correctement et le code généré est propre.

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Non
Multi-catégories : Oui
Ajout de catégories : Non
Balise “more” : Non – Mode code
Tags : Oui
Images : Oui avec upload necessaire
Propriétés images : Oui – sans légende
Mode brouillon : Oui

5°)Post2Blog

Informations générales :

Adresse du projet : http://bytescout.com – Pour télécharger : http://www.clubic.com/telecharger-fiche63770-post2blog.html
Plateformes : Windows
Licence / Prix : Gratuit – Freeware

Post2Blog est un logiciel au même titre que Windows Live Writer et s’execute donc comme un programme courant. L’installation est simple.

Il intègre également des extensions pour IE et Firefox ainsi qu’un plug-in pour Windows Office (non testé).

Info : Pour l’installation de l’extension Firefox, il est nécessaire d’aller chercher cette extension dans le dossier “C:\Program Files\Post2Blog\Firefox”. Il vous est proposé d’installé cette extension après l’installation du logiciel et ceci en cliquant sur un lien ; il est nécessaire de réaliser cette opération depuis Firefox. Il est fortement probable que le plug-in ne s’installe pas pour des restrictions de sécurité.

Le paramétrage se fait sans encombre, l’assistant nous guide parfaitement dans le paramétrage.

L’interface est très complète ! Elle permet d’intégrer tous les éléments nécessaires à l’édition d’un Blog. J’ai également apprécié la possibilité d’ajouter des Snippets, très utile pour intégrer vos propres balises telles que les balises de code. Le code généré semble propre.

Le logiciel est un peu moins intuitif que Windows Live Writer mais il intègre plus de fonctionnalités. Petit défaut tout de même en ce qui concerne la mise en page et plus particulièrement le positionnement des images.

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Non
Multi-catégories : Oui
Ajout de catégories : Oui
balise “more” : Oui
Tags : Oui
Images : Oui
Propriétés images : Oui – Toutes
Mode brouillon : Oui

6°) BloDesk

Informations Générales :

Adresse du projet : http://www.blogdesk.org/
Plateforme : Windows
Licence / Prix : Gratuit – Freeware

BlogDesk est un programme exécutable. On notera qu’il existe une version Française. L’installation et le paramétrage sont très simples.

On retrouve les fonctionnalités principales de l’éditeur WordPress mais la barre d’outils est beaucoup moins fournie.

Quelques notes :

Pas de légende sur les images
Pas de gestion des titres (ha,h2,etc…)
Générateur de Tags
Options spécifiques WordPress

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Non
Multi-catégories : Oui
Ajout de catégories : Oui – mais dans l’interface de configuration
balise “more” : Non – Insertion HTML
Tags : Oui
Images : Oui
Propriétés images : Oui – quelques unes
Mode brouillon : Oui

7°) wBloggar

Cette solution est similaire à Post2Blog en ce qui concerne les fonctionnalités. L’installation est simple mais le paramétrage peut paraître un peu plus complexe.

L’interface est très complète et permet d’éditer des articles avec les mêmes éléments que l’éditeur WordPress. Malgré cela, l’interface reste assez complexe, du genre pourquoi faire simple quand on peut faire compliquer…

L’insertion d’image par exemple est assez complexe ; en effet, il est nécessaire d’uploader l’image avant de pouvoir l’insérer ce qui n’est pas réellement pratique pour le mode “off-line”…

On notera tout de même de nombreuses fonctionnalités.

Comparatif

Mode hors connexion : Oui
Editions d’entrées : Oui
Mode code : Oui
Aperçu : Non
Multi-catégories : Oui
Ajout de catégories : Oui – mais dans l’interface de configuration
balise “more” : Non – Insertion HTML
Tags : Oui
Images : Oui
Propriétés images : Oui – quelques unes
Mode brouillon : Oui

Mon Classement :

Info : Ce Classement est personnel, il ne reflète en rien une vérité absolue sur la qualité des logiciels présentés. Je vous laisse libre de vous faire votre propre opinion.

Windows Live Writer
Post2Blog
ScribeFire
Qumana
wBloggar
BlogDesk
Sun WebBlog Publisher

Tableau comparatif

Plateformes

Note

Images

Vidéos

Aperçu Live

Mode Full off-line

Windows Live Writer

8/10

Sun WebBlog Publisher

3/10

Scribe Fire

6/10

(YouTube)

Qumana

6/10

Post2Blog

7/10

(Via Snippets Oui)

BlogDesk

4/10

wBloggar

5/10

Conclusion

Vous avez de quoi éditer vos blogs en mode Desktop ! Faites vous votre propre opinion sur ces solutions et si vous en connaissez ou utilisez d’autres, n’hésitez pas à nous les faire partager.

Tests à venir :

Zoundry
Thingamablog
Flock
Bleezer
BloGTK
QTM
Thingamablog

eZ Components devient Zeta Components

Steve Leherpeux — Tue, 10 Aug 2010 07:01:58 +0000

Le framework PHP eZ Components a depuis ce 19 avril changé d’identité, il sera désormais connu sous le nom de Zeta Components
et sera désormais un projet de la fondation Apache Software. En effet,
l’éditeur norvegien eZ Systems a accepté de donner les licences de
proprietés à la fondation Apache pour en faire un projet Open source.

-> Page principale de l’annonce : http://share.ez.no/blogs/ez/goodbye-…eta-components

-> Page de la proposition du projet au groupe Apache : http://wiki.apache.org/incubator/ZetaComponentsProposal

-> Page de Détails sur le framework eZ Components : http://ezcomponents.org/

Article original Publié depuis http://www.developpez.net/

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…