actu

Google Chrome porté sous Linux!

Avant toute chose cet article concerne la version beta, déclaré « unstable»  par ces messieurs de chez Google. Aprés l’avoir utilisé pendant une semaine, je vous garantie que cette version de Google Chrome est le navigateur le plus parfait à ce jour sous Linux (du moins avec mon environnement 32bits).

Première surprise après l’installation du paquet deb fournit par Google à titre de test, c’est l’intégration de ce navigateur avec mon système d’exploitation. Aussitôt installé, le programme m’invite tout de suite à importer les donnés de Mozilla Firefox et « ho miracle» , il me fait ça à la perfection, y comprit pour l’auto-complétion de la barre d’adresse avec mon historique ou encore mes mots de passe, bref tout y est.

Seconde surprise, je me rend sur youtube et sans rien bricoler il utilise directement mon plugin flash installé et me lis la vidéo sans ronchonner!

screenshot

Enfin pour conclure ce test des plus enthousiaste concernant Google Chrome sous Linux, on peut dire que ce portage est une réussite. Ce navigateur utilise le moteur de rendu que l’on ne présente plus: Webkit, qui pour la petite histoire est basé sur KHTML un moteur de rendu libre issue de la communauté KDE. Personnellement, je ne peut plus m’en passé depuis que je l’ai essayé, je n’en pouvais plus de Firefox qui me consomme 65% de ressource CPU et un bon tiers de ma RAM en permanence… Google Chrome est d’une rapidité à toute épreuves et correspond vraiment au navigateur que je recherche, simple et efficace. Reste à voir la réponse de la fondation Mozilla…

actu

Fullcircle #29

Juste un rapide billet pour vous présenter l’édition 29 de FullCircle le webzine de la communauté des utilisateurs d’Ubuntu. Au menu de ce numéro et en vrac, on continu le tutoriel sur Python, monter une solution LAMP et les VPN. Mais aussi un dossier spéciale sur les jeux de physique et de gravité très à la mode en ce moment ainsi que vos rubriques habituelles. Tout se passe par là sur le site officiel (in english only).

Bonne lecture à tous!

Portfolio

Calyopé, inspiré pour vous détendre

Un rapide billet pour vous présenter une de mes dernière réalisation, calyope.com. Calyopé est un centre de détente aux portes de la Normandie qui propose des séances de massages, luminothérapie, hammam, U.V, balnéothérapie ou encore la massothérapie et pleins de bonnes choses encore pour votre détente et votre bien etre que je vous laisserai découvrir sur le site.

Et voici un rapide apercu du cahier des charges de ce projet, le client souhaitait un site qui ne trahisse pas sa charte graphique, simple et efficace qui présente le centre et les services qu’il propose. Le site doit être administrable par le client et présenté une promotion mensuelle.

Après avoir fait le tour des CMS les plus connues aucun ne convenait au projet, tous trop compliqué au niveau de l’administration, je ne voulais pas utilisé une usine à gaz pour un site de type vitrine, j’ai donc développé mon propre CMS dont je reparlerais prochainement sur ce blog.

W3C

Pour la partie technique, ce site utilise PHP, Ajax, HTML5, Javascript et CSS2, ainsi qu’une base de données Mysql. J’ai utilisé le framework Jquery et jquery UI pour concevoir le backoffice ainsi qu’un plugin Jquery WYSIWYG pour transormer les textarea en zone d’édition. Le tout répond aux standart du web et est valide W3C.

Backoffice

Brève

Le système de fichier de l’iPhone 3G est très facilement accessible depuis un système Mac ou Linux par le biais d’un protocole libre, éprouvé et sécurisé j’ai nommé Openssh. On peut ainsi aisément transformé en NAS sans fil.

Pour y avoir accés vous devez avoir un iPhone 3G jailbreaker et les paquets insomnia et openssh que vous trouverez dans Cydia.

Une fois ces deux dépendance installés, il vous suffit de connecter votre iPhone et votre ordinateur sur un routeur wifi, si ce n’est pas déjà fait. D’attribuer une adresse fixe a son iPhone et de s’y connecter. Sous GNU/Linux dans un environnement Gnome par exemple, il faut cliquer sur Raccourcis->Se connecter à un serveur.

Se connecter à un serveur

On entre les paramètres

Ici il faut entrer l’adresse ip de votre iPhone dans le champs « serveur» , et laisser tout les autres champs pareil. Une invitation à autoriser la clef de partage vous demande de confirmer, et il ne vous reste plus qu’a rentrer le mot de passe qui est « alpine»  si vous ne l’avez pas déjà modifié et une nouvelle fenêtre apparait avec le contenu du dossier utilisateur de votre iPhone ainsi qu’un signet dans votre liste d’emplacement. Sur Mac la manipulation à faire est similaire car les OS d’Apple utilisent en natif ce protocole qu’est SSH.

L'iPhone 3G deviens un NAS, un périphérique de stockage réseau trés pratique.

brève

Icone de Cycorder

Cycorder est une application gratuite qui enregistre le son et la vidéo dans une résolution de 384×288 en format 4×3 (television). Les vidéos sont stocker dans votre dossier utilisateur « /var/mobile/Media/Vidéos/» .

Pour pouvoir l’installer vous devez disposer d’un iPhone 3G n’importe quel version (3.0 de préfèrence) et l’avoir jailbreak.

Le plus simple est de télècharger le firmware de l’iPhone 3G en version 3.0 et de le réinstaller avec RedSnow

*/ Le logiciel RedSnow (pour windows : lien1, lien2, lien3) et (lien pour Mac).

Si votre iPhone est déjà en 3.0, alors vous n’avez aucun risque de perdre vos données tout comme si il est déjà jailbreaké. Vous pourez ensuite le restaurer dans ses paramètre d’usine sans problème pour un éventuel envoi en SAV. Lors de l’installation, coché la case Cydia et une fois le iPhone mis à jour ouvrez le programme Cydia et rechercher le paquet « Cycorder» .

Première ouverture de Cydia

Choisissez Cycorder dans le menu accueil de Cydia> featured.

Cycorder à l'action

Tutoriel

Facebook

Pour cette troisième et dernière partie de ce tutoriel, nous allons écrire le mécanisme de l’application en question à savoir afficher une question aléatoire depuis un fichier XML et enregistrer la réponse par le biais d’une requéte AJAX dans la base de donnée MySQL.

Pour se faire nous allons déjà créer notre document XML qui contiendra les questions et faire ensuite un fichier qui servira de serveur pour nos requetes AJAX puis enfin styler le tout avec un peu de CSS.

Le langage XML

Voici la structure de notre document XML qui contiendra les questions, gardez en tête que XML est un language de balisage non strict, ce qui signifie que c’est vous qui inventez les balises et leurs attributs.

< ?xml version="1.0" encoding="ISO-8859-1"?> 
<form>
	<question>
		<id>0</id>
		<txt>
			<fr>
				 Combien font 2+2?
			</fr>
		</txt>
		<txt_reponses>
			<fr>
				<reponse idr="0_1">Je trouve pas ma calculette...</reponse>
				<reponse idr="0_2">4</reponse>
				<reponse idr="0_3">Je m'en fout!</reponse>
			</fr>
		</txt_reponses>
	</question>
 
	<question>
		<id>1</id>
		<txt>
			<fr>
				 XML est il un language de balisage strict?
			</fr>
		</txt>
		<txt_reponses>
			<fr>
				<reponse idr="1_1">Pire tu meurs</reponse>
				<reponse idr="1_2">XM quoi???</reponse>
				<reponse idr="1_3">Je m'en fout!</reponse>
			</fr>
		</txt_reponses>
	</question>
 
</form>

Voici un exemple pour le fichier XML, chaque balises question contient une sous balise « id»  qui doit être incrémenter à chaque nouvelle questions, tout comme pour les reponses avec l’attribut « idr»  qui contient l’ID de la question suivi du numéro de la réponse pour s’y retrouver plus tard. J’ai entouré la question et les réponses d’une balise « fr»  pour vous montrer qu’il est possible de proposer les traductions directement dans le fichier XML ce qui évite d’atteindre les limites de la balise fb:intl qui est l’outil de traduction Facebook.

php_attitude

Notre fichier XML remplis passons maintenant au fichier qui répondra à nos requêtes AJAX. Pour commencer une fonction qui récupère une question aléatoire dans notre fichier XML et qui l’affiche à votre visiteur dès que ce dernier clique sur commencer.

< ?php
require_once 'inc/facebook.php'; // On commence par appeler l'API fb
require_once 'lib/db_connect.php'; // On se connecte à la bdd
// Et ici toutes vos classes
 
$appapikey = 'votre API once again';
$appsecret = 'Votre API secret once again';
$facebook = new Facebook($appapikey, $appsecret);
 
// Toutes les variables d'URL pour simplifier la maintenance de l'appli
$appname = 'Ici le nom de votre appli (URL)';
$fb_path = 'http://apps.facebook.com/';
$app_path = $fb_path.$appname.'/'; // Verifiez que le resultat mene bien vers votre appli
$callbackurl = 'Ici votre callback URL';
 
// Ces deux variables recupéreront l'ID et la langue de l'utilisateur dans la requete AJAX
$user_id = $_POST['fb_sig_user']; 
$lang = $_POST['fb_sig_locale']; 
 
// Par exemple avec ca notre appli gére le francais et l'anglais
if ($lang == 'fr_FR') {
	$l = 'fr';
} else {
	$l = 'en';
}
 
// Donner la premiere question, en vérifiant que l'ID de l'utilisateur soit bien numérique
if ((isset($_POST['start'])) && (isset($_POST['fbid'])) && (is_numeric($_POST['fbid']))) {
	$fbid = $_POST['fbid'];
	// On charge notre fichier XML et le transforme en objet avec SimpleXML
	$xml = simplexml_load_file('q.xml');	
	// On compte les questions
	$i = -1;
	foreach($xml->xpath('//question/id') as $id) {
		$i++;
	}	
	// On choisit une question aléatoire
	$id_next = mt_rand(0,$i);
	// On charge des variables avec les reponses et la question
	$question =  $xml->xpath('//question[id="'.$id_next.'"]/txt/'.$l.'');
	$rep = $xml->xpath('//question[id="'.$id_next.'"]/txt_reponses/'.$l.'');
	// on renvoi tout ca
	echo '
	<div class="reponse" id="reponse">
		<!-- Ce div sert à afficher un chargement entre 2 question -->
		<div id="loader" style="display: none;">
			<h2><fb :intl>Chargement en cours...</fb></h2>
		</div>	
		<div id="question_reponse">
			<h1>'.$question_.'</h1>	
			<br />
	';
	// Pour chaque réponse on fait un bouton avec notre futur fonction Ajax
	// Il contient l'ID de la prochaine question, l'id de la reponse cliqué
	// et l'id de l'utilisateur
	foreach($rep[0] as $reponse) {
		echo '<button onclick="next_question(\'questionnaire_wrap\',\''.$id_next.'\',\''.$reponse->attributes()->idr.'\',\''.$fbid.'\'); return false;">'.$reponse.'</button>
		&nbsp;&nbsp;';
	}
	echo '
	</div>	
	';
}
?>
</div>

Voila ce bout de code des plus commenté prend place dans le dossier lib, dans un fichier que l’on nommera server.php par exemple. Elle se chargera d’envoyer la première question et de mettre notre appli sur les rails. Voici maintenant un autre bout de code qui vous permettra d’enregistrer la réponse et de donner la question suivante.

// Recuperer la reponse et donné la question suivante
// On verifie que la requte AJAX contiens tout ce dont on a besoin
if ((isset($_POST['id_question'])) && (isset($_POST['reponse'])) && (isset($_POST['fbid'])) && (is_numeric($_POST['fbid'])) && (is_numeric($_POST['id_question']))) {
	// On charge des variables
	$fbid = $_POST['fbid'];
	$last_question = $_POST['id_question'];
	$last_reponse = mysql_real_escape_string($_POST['reponse']);
	// On enregistre dans la bdd
	$requete = 	("INSERT INTO `form`
				(`fb_id`, `victime_id`, `question_id`, `reponse`, `timestamp`)
				VALUES ('$user_id', '$fbid', '$last_question', '$last_reponse','$timestamp')");
	$send = mysql_query($requete,$connection) OR DIE(mysql_error());	
	// on charge notre fichier XML en objet
	$xml = simplexml_load_file('q.xml');
	// compter le nombre de question
	$i = -1;
	foreach($xml->xpath('//question/id') as $id) {
		$i++;
	}	
	$id_next =  $last_question + 1;
	// verifier que la question suivante existe sinon on repart a zero
	if ($id_next > $i) {
		$id_next = 0;
	}
	$question =  $xml->xpath('//question[id="'.$id_next.'"]/txt/'.$l.'');
	$rep = $xml->xpath('//question[id="'.$id_next.'"]/txt_reponses/'.$l.'');
	// et on renvoi la question suivante
	echo '
	<div class="reponse" id="reponse">
		<!-- Ce div sert à afficher un chargement entre 2 question -->
		<div id="loader" style="display: none;">
			<h2><fb :intl>Chargement en cours...</fb></h2>
		</div>	
		<div id="question_reponse">
			<h1>'.$question_.'</h1>	
			<br />
	';
	// Pour chaque réponse on fait un bouton pour notre futur fonction Ajax
	// Il contient l'ID de la prochaine question, l'id de la reponse cliqué
	// et l'id de l'utilisateur
	foreach($rep[0] as $reponse) {
		echo '<button onclick="next_question(\'questionnaire_wrap\',\''.$id_next.'\',\''.$reponse->attributes()->idr.'\',\''.$fbid.'\'); return false;">'.$reponse.'</button>
		&nbsp;&nbsp;';
	}
	echo '
	</div>	
	';
}
</div>

Voila pour notre fichier server.php, on peut imaginer des envois de notification ou feed dans les réponses qu’il retourne, ce n’est évidemment qu’un exemple à vous de le faire évoluer. Il ne nous reste plus qu’a créer notre fonction AJAX en FBJS (le javascript Facebook) pour nous relier avec notre fichier server.php et styler le tout avec un peu de CSS.

Ajax

< ?php
// On active le login pour récupérer l'id de l'utilisateur
$login = true;
// On affiche le menu de notre appli
$tabs = true;
// On appel notre header.php
require_once('header.php');
 
// La balise FBML fb:name permet de récupérer via l'id le nom et le prénom de l'utilisateur
echo '<h1>Bienvenue <fb :name uid="'.$user_id.'" />!!
<div id="load_prant">	
	<!-- Ce div sert à afficher un chargement entre 2 question -->
	<div id="loader" style="display: none;">
		<h2><fb :intl>Chargement en cours...</fb></h2>
	</div>	
</div>	
<div id="questionnaire_wrap">
	<div class="reponse" id="reponse">
		<a href="#" onclick="start_question(\'questionnaire_wrap\',\'ok\',\''.$fbid.'\'); return false;">Commencer le questionnaire</a>	
	</div>
</div>	
<!-- Ceci est une variable FBJS vide pour vider le contenu dun div lors des chargements -->
<fb :js-string var="empty"></fb> 
';
// Au clique de ce lien on commence le questionnaire $fbid contient l'ID utilisateur
// voir le header.php pour plus d'infos
 
// Et enfin nos 2 fonctions Ajax
?>
<script type="text/javascript">
<!--
function start_question(div,start,fbid) {
	// On affiche le message de chargement
	document.getElementById('loader').setStyle({display: 'block'});
	// On vide le contenu de #questionnaire_wrap
	document.getElementById('questionnaire_wrap').setInnerFBML(empty); 
	// On initialise la requete AJAX
	var ajax = new Ajax(); 
	// La reponse sera en FBML (le html fb) mais on aurai pu l'avoir en Json
	ajax.responseType = Ajax.FBML; 
	// Une fois la requete envoyé et la réponse de server.php recu
	ajax.ondone = function(data) { 
		var loader = document.getElementById('loader'); 
		// On supprime les noeuds enfants de #load_parent dans l'arbre DOM
		// vu qu'il sera renvoyé par le server.php
		document.getElementById('load_parent').removeChild(loader);
		// On affiche le resultat dans la variable div qui contient l'id du div questionnaire_wrap
		document.getElementById(div).setInnerFBML(data); 		
	} 
	// Laisser à 1 pour envoyer avec la requete la langue et l'ID utilisateur
	// Plus pleins d'autres infos
	ajax.requireLogin = 1;
	// On envoi les donnés
	// start vaut "true" il sera verifier en php avec if ($_POST['start']) {...}
	// Et fbid contient l'ID utilisateur recuperer dans header.php
	var params={"start":true,"fbid":fbid}; 
	// Verifier bien le chemin vers votre server.php
	ajax.post('<?php echo $callbackurl; ?>lib/server.php',params); 
}
 
function next_question(div,idQuestion,reponse,fbid) {
	// On affiche le message de chargement
	document.getElementById('loader').setStyle({display: 'block'});
	// On vide le contenu de #questionnaire_wrap
	document.getElementById('questionnaire_wrap').setInnerFBML(empty); 
	var ajax = new Ajax(); 
	ajax.responseType = Ajax.FBML; 
	ajax.ondone = function(data) { 
		var reponse = document.getElementById('reponse'); 
		reponse.setInnerFBML
		// On affiche les donnés
		document.getElementById(div).setInnerFBML(data);
		// On cache le loader 
		document.getElementById('loader').setStyle({display: 'none'});
	} 
	ajax.requireLogin = 1;
	var params={"id_question":idQuestion,"reponse":reponse,"fbid":fbid};
	ajax.post('< ?php echo $callbackurl; ?>lib/server.php',params); 
}
--> 
</script>
 
< ?php
// On appel notre footer.php
require_once('footer.php');
?>

Voila l’application est désormais préte il ne reste plus qu’a la styler un peu avec du CSS.

Cascading style sheet

Pour utiliser CSS dans vos applications Facebook, il y a de nombreuses techniques, je vais vous en montrer une simple. Elle consiste à créer un fichier style.php dans votre dossier lib et de l’inclure dans vos librairies du fichier header.php, voici le contenu de ce fichier.

< ?php
function get_style() {
	echo '<style type="text/css">
	/* ICI votre code CSS */
	';
}
?>

Après l’avoir inclus dans votre header.php, n’oubliez d’exécuter la fonction avec « get_style();» 

Vous voila prêt à écrire vos propres applications Facebook, gardez en tête d’alléger au maximum vos applications car pendant les montés en charges Facebook a du mal à suivre et surtout de les sécuriser. Le succès d’une application réside dans la viralité de cette dernière c’est à dire sa capacité à se rendre indispensable pour les utilisateurs et à se répandre sur les profils des utilisateurs de Facebook. L’API facebook regorge de fonctions pour vous faciliter le travail et le wiki est une mine d’informations à ne surtout pas négliger.

Je met à votre disposition la source de cet fabuleuse application qui ne sert pas à grand chose si ce n’est de vous faire comprendre le fonctionnement d’une application Facebook.

Télèchargez la source de l'appli

Actu

Jolicloud alpha

Jolicloud est un OS basé sur Linux Debian et Ubuntu. Il affiche une interface des plus léché, la capacité de gérer une machine tactile, et toutes les innovations que l’on retrouve dans toutes les distros GNU/Linux récentes.

Pour le moment en version Alpha ce prometteur OS est à surveillez de très prés. Son interface est une d’une simplicité à toute épreuve et son système de gestion des paquets (Deb) est lui aussi des plus éprouvés.

Launchpad

Launchpad est une plateforme de développement et de support de projets développé par Canonical, C’est la même solution qui gère les évolutions et le suivie des bug de la distribution Linux Ubuntu. Ainsi comme l’avait promis Mark Shuttleworth le code source de cette application web sera rendu open source.

Une sélection d’applications libres que vous devriez connaitre!

Ressources

jquery-plotting-plugin

Ce plugin vous permet aisément de générer des courbes ou encore des barres avec affichage de tooltip et de nombreuses options pour personnaliser l’affichage.
En savoir plus sur la page officielle du projet: http://www.jqplot.com/

Validation des formulaires

Et voici un plugin pour enrichir vos formulaires d’inscription ou de contact. Il vous permettra d’optimiser l’expérience utilisateur mais aussi de valider en temps réel les saisies de l’utilisateur. Ce plugin nous viens de Position Absolute: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/.

Arborescence en JS

Pour afficher vos arborescences facilement et de façon sympa, ce plugin jQuery parse un fichier Json, XML ou encore des éléments de l’arbre DOM pour créer une arborescence. Site officiel: http://www.jstree.com/

Des menus sympas

Pour votre inspiration voici 36 liens sur des tutos pour créer des menus originaux et qui se dégrade correctement (dans l’ensemble) le tout en utilisant le framework jQuery. Vus sur 1stwebdesigner.com: http://www.1stwebdesigner.com/resources/36-eye-catching-jquery-navigation-menus/

Jmodal

Et pour terminer voici une sélection de 15 plugins jQuery parmis les plus pratiques, à noter celui qui vous permet de réaliser des fenêtres modales comme sur Facebook pour enrichir vos interfaces utilisateurs. Vu sur Dreamcss: http://www.dreamcss.com/2009/05/15-awesome-jquery-plug-in.html

Dossier

GNU/Linux

On parle de plus en plus du logiciel libre, des licences GNU et de Linux ces derniers temps, mais pourquoi utilise t’on ces technologies libres au bureau, à la maison, dans les centres de donnée ou encore dans des lieux publics? A quoi ressemble Linux?

Pour le commun des mortels, Linux c’est un système d’exploitation compliqué et réservé qu’a une certaine « élite»  d’utilisateurs. La réalité est tout autres, pour utiliser une distribution Linux doté d’une interface graphique tel que Fedora, Debian, Mandriva ou encore Ubuntu, il ne faut strictement connaitre aucune ligne de commande, mais simplement savoir cliqué sur des icônes et des boutons, et oui ce n’est pas plus compliqué que ça.

Pour commencer voici ce à quoi ressemble Linux en 2009.

Pluiseurs postes de travail

Un bureau en 3d

workspaces

Le mode expose

Pour comprendre comment fonctionne Linux, il faut tout d’abord penser simple. En effet lorsque vous avez un besoin, vous trouverez toujours un programme qui convient, sous Linux un programme est appelé un paquet. Ces paquets vous les trouvez dans des dépôts. Pourquoi un tel fonctionnement? C’est simple cela permet de corriger et de maintenir les programmes plus simplement et surtout c’est sécurisé, en effet sous windows vous téléchargez tout et n’importe quoi en prenant un programme, car il est facile de packagé un logiciel avec d’autres logiciels malveillants ou espion. Les logiciels qui se trouvent dans les dépôts fonctionnent, sont souvent mis à jour et sont surtout vérifiés.

Lanceur d'application

Pour lancer une application, vous trouverez un menu de lancement des programmes trié par catégorie comme partout ailleurs, mais vous pouvez aussi utiliser une dock (la barre comme sous Mac OS ou encore le raccourci alt+f2 qui vous permettra de lancer une application en tapant ses premières lettres.

Linux propose de nombreuses innovations et de nombreux avantages pour n’importe quel type d’utilisateur. Je suis surpris tout les jours par sa souplesse d’installation et d’utilisation, connecter un ordinateur sous Linux à un réseau, il trouvera directement tout les partages de fichier MacOS et Windows. Ouvrez votre lecteur de musique vous trouverez toute la musique partagée sur le réseau. La communication entre machine n’a jamais étè aussi simple.

TSclient

Pour se connecter et administré des machines autres que Linux sur un réseau ou internet il existe de nombreux outils comme « tsclient»  qui vous permet de vous connecter à une machine sous Windows via le protocole Microsoft Terminal server.

Gwibber

Les distributions Linux récentes sont sociables, de nombreux outils vous permettent de suivre et d’interagir avec vos comptes Facebook, Twitter ou autres. Ouvrez un client de messagerie tel que Pidgin et vous pourrez communiqué en direct avec vos amis sur Facebook très simplement.

Pour conclure, Linux représente beaucoup d’avantages pour les utilisateurs lambda, les développeurs et certains professionnels. Cependant gardez en tête que certains logiciels propriétaires comme l’environnement de développement Flash ou encore le lecteur de musique Itunes ne fonctionne pas sous Linux on trouve d’excellentes alternatives et c’est ça la force de Linux. Soumettez un bug, il sera corrigé très rapidement, dans une des nombreuses mises à jour quotidienne. Une faille de sécurité est trouvé, elle est corrigé dans les heures qui suivent. Linux repose sur une fidèle communauté d’utilisateurs qui aiment et font évoluer le logiciel libre et ce système d’exploitation au quotidien pour atteindre la perfection.

Quelques liens vers les principales distributions qui vous permettent de tester en live (sans changement sur votre ordinateur) Linux:

Ubuntu: La distribution GNU/Linux la plus célèbre, elle est basé sur Debian.

Fedora: Une autres excellente distribution GNU/Linux

Debian: La plus robuste à mon sens

Mandriva: La plus « user friendly»  mais reste payante dans sa version complète.

Cette liste est très loin d’être exhaustive, vous pouvez trouver énormément d’autres distributions GNU/Linux. Pour en savoir plus, consultez l’onglet vidéo pour voir tout ça à l’action!

video

Tutoriel

Attention au bigint (20) pour stocker l'identifiant Facebook

Il vous faudra un serveur de base de donnée type MySQL, pour s’y connecter nous allons faire une fonction adéquate ainsi que pour récupérer des données relative à un ou plusieurs utilisateurs.

< ?php
$bdd="fb_app_test";
 
$connection = mysql_connect("localhost", $bdd,"motdepasse");
// test la connection
if ( ! $connection )
  die ("connection impossible");
  // Connecte la base
  mysql_select_db($bdd) OR DIE('Erreur de la base de donnée');
?>

Une fois connecté on récupère facilement des données depuis une fonction de ce type

// ******** VERIFICATION **********
// verifier que le user existe
function is_user($user_id, $connection) {
	$requete= ("SELECT COUNT(*) NBR_ENTREE FROM `users`
					WHERE `fb_id`='".$user_id."'");
	$send = mysql_query($requete,$connection) OR DIE('Erreur de la requête MySQL');
	$row = mysql_fetch_object($send);
	$nb = $row->NBR_ENTREE;
	if ($nb > 0) {
		$isuser = true;
	} else {
		$isuser = false;
	}
	return $isuser;
}

// Recuperer plusieurs champs
// $data est un array qui contient les valeur a recup
// $table contient la table à interroger
function get_datas($user_id, $connection, $datas, $table, $where, $where_this) {
	$liste = implode(',', $datas);
	$requete = 	("SELECT $liste
				FROM `$table`
				WHERE `$where`='$where_this'") ;
	$send = mysql_query($requete,$connection) OR DIE(mysql_error());	
	$data =  mysql_fetch_array($send);
	return $data;
}

Il ne reste plus qu’a se faire une petite batterie de fonctions simples et utiles, une classe. Toutes ces librairies devront êtres inclus dans le header.php avec la fonction require_once();.

Le wiki FB

Pour découvrir l’API Facebook plus en détail je ne peut que vous conseiller de découvrir le wiki officiel et ses forums. Enfin pour gérer vos applis ca se passe sur la page des developpeurs Facebook.

Pour utliser le FBML (Fb markup Language), je vais vous présenter les fonctionnalités les plus utilisés, mais vous trouverez tout dans le wiki et le forum.

Pour se familiariser avec l’API, je vais vous présenter les fonctions les plus utilisés:

// Envoyer une notification
try {
	$facebook->api_client->notifications_send($cible, $text, $mode);	
} catch (Exception $e) {
	error_log($e->getMessage());
}
// Envoyer un feed (sur le profile de l'utilisateur
try {	
	// X est en train de repondre
	$template_bundle_id = XXXXXXXXX;
	$tokens = array( 'actor'=>$user_id);
	//There is no target for the story in this example, but if there was, 
	//$target_ids would be an array of user ids 
	$target_ids = array(); 
	$body_general = ''; 
	$facebook->api_client->feed_publishUserAction( $template_bundle_id,
													json_encode($tokens),
													implode(',', $target_ids),
													$body_general);
}
catch (Exception $e) {
	error_log($e->getMessage());
}

A noter qu’il faut toujours employé la structure try{} et catch{} lorsque l’on appel l’API Facebook afin de ne pas afficher d’erreur en cas de problèmes et surtout pour analyser et éventuellement stocker dans des logs les erreurs rencontrés. Pour construire des feed, tout se passe sur cette page dédiée de la documentation.

API REST FB

Nous venons de rentrer dans le vif du sujet, pour la troisième et dernière partie de ce tutoriel, nous construirons une page pour que vos futurs utilisateurs puissent partager l’application. Nous allons aussi utiliser XML pour stocker et rapatrier des données, apprendre à utiliser les requêtes Ajax et styler notre appli avec un peu de CSS, le tout dans une archive à télècharger.

chronique

Le set d'icone

Pour enrichir vos interfaces utilisateur voici un set de 50 icones au format PNG en 48*48.

Via Webressourcesdepot

Un effet de page corné en Javascript et CSS

Voici un effet des plus sympa pour mettre en avant un nouveau projet par exemple, au passage de la souris la page se corne comme une feuille de papier et laisse apparaitre ce que vous voulez. Ce genre d’éffet nécéssitait l’utilisation de flash c’est désormais de l’histoire ancienne grace à Javascript (et de la librairie Jquery). Pour consulter une démo c’est par ici: http://www.sohtanaka.com/web-design/examples/peeling-effect/ et pour plus d’information c’est sur le blog de sohtanaka

Vérification de la sécurité d'un passe dans un formulaire

Toujours pour vos UI voici quelques exemples de script pour vérifier en temps réel la sécurité du mot de passe de vos utilisateurs lors de l’enregistrement.

Via Webressourcesdepot.

Une sélection de 100 thèmes pour Wordpress

Pour tout les utilisateurs de l’éxellent moteur de blog Wordpress, voici une sélection de 100 thèmes parmis les mieux réalisés en 2009.

Via Smashingmagazine

Voici une sélection de design pour votre inspiration.

Via Smashing magazine

Une série d'effets en Javascript pour vos sites web

Et pour finir voici une sélection d’effet en Javascript pour présenter vos galeries d’image ou encore vos menus plus quelques techniques d’Ajax que vous devriez connaitre!

Via Smashing magazine

tuto

Facebook

Au travers d’un article en trois parties je vais vous décrire comment réaliser vous même une application Facebook de A à Z. Pour se faire nous utiliserons du PHP et du MySQL pour la partie serveur ainsi que du FBML (le language de balisage Facebook), du FBJS (le javascript de Facebook) ainsi que du HTML et du CSS pour mettre en forme le tout.

Notre cas d’étude sera une application qui envoi une question à l’utilisateur qui l’utilisera. Elle devra etre capable de reconnaitre l’utilisateur, de stocker ses réponses et de lui retourner en cas de besoin. Nous aurons l’occasion d’étudier le système de notification Facebook ou encore l’intégration au profil de l’utilisateur.

Avant toute chose, il faut récupérer une clef API et réserver l’identifiant de votre application (http://apps.facebook.com/VOTRE APP/). Pour se faire, il vous suffit de vous rendre sur cette page: http://www.facebook.com/developers/

Une fois le formulaire remplis, je vous invite à configurer les principaux paramètres, a savoir votre URL de rappel (la callback URL) ainsi que l’adresse de votre application. L’URL de rappel est l’adresse URL ou est hébergé votre application, si votre serveur répond à l’adresse 10.0.0.1 ce sera: http://10.0.0.1/applifb/ ou applifb est le dossier qui contient votre application. On pourrait imaginer que l’url du canveva (http://apps.facebook.com/votreappli) est une fenetre vers le dossier de votre serveur (http://10.0.0.1/applifb/)

Cliquez sur ce bouton et ensuite remplissez le formulaire

Recupérez votre clef et secret

Configuer votre callback URL et l'adresse de l'appli

Laissez toutes les autres options par défaut, notamment le mode en FBML et non Iframe. Nous allons ensuite commencer à rentrer dans le vif du sujet, a savoir récupérer l’API Facebook pour PHP et commencer à rédiger notre application. Pour télécharger l’API en question cliquez sur ce lien.

Nous allons maintenant ordonner notre projet, le dossier api contient l’API PHP Facebook, lib contiendra nos classes ou fonctions PHP ainsi qu’un dossier js,img et css. Enfin des fichiers header.php, index.php et footer.php qui comme leurs noms l’indique contiendront le haut, le centre et le pied de page de notre application.

L'arborescence de notre application

Une fois tout ce beau monde en place, nous allons commencer par une pièce maitresse de notre application, à savoir le fichier header.php, c’est lui qui contiendra toutes les informations essentielles au bon fonctionnement de notre application, voici son contenu:

< ?php
// Ici nous inclurons toutes nos librairies (classes ou fontions) 
// ainsi que l'API Facebook 
require_once('api/facebook.php');
 
// Contiendra la fonction pour se connecter à notre base MySQL (commenté pour le moment)
// require_once 'lib/db_connect.php';
// Contiendra notre classe propre à notre projet
// require_once 'lib/fonctions.php';
// Contiendra notre code CSS
// require_once 'css/css.php';
 
// Remplissez ces informations
$appapikey = 'ICI API KEY'; // Clef API
$appsecret = 'ICI VOTRE API SECRET'; // Secret API
$facebook = new Facebook($appapikey, $appsecret);
$callbackurl = 'http://10.0.0.1/applifb/'; // Votre callbackurl
 
// On recuperere l'id de l'utilisateur en lui donnant la valeur TRUE lorsque nous appelerons header.php depuis une page de l'appli
if ($login) {
	$user_id = $facebook->require_login();
}
 
// Les urls
$appname = 'ICI LE NOM DE VOTRE APPLI';
$fb_path = 'http://apps.facebook.com/';
$app_path = $fb_path.$appname.'/';
 
$homepage = $fb_path.$appname.'/'; // Cette variable contiens l'URL de l'index de notre appli
$invitepage = $fb_path.$appname.'/invite.php'; // Ici la futur page d'invitation
 
$page = basename($_SERVER['PHP_SELF']); // Variable qui contiendra le nom du script qui s'execute (exemple: index.php)
$page_full = $_SERVER['PHP_SELF']; // Le chemin complet
 
// On imprime le code CSS de notre appli (commenté pour l'instant)
// $style = get_style();
 
// Si la variable $tabs vaut TRUE à l'appel de header.php
if ($tabs) {
echo '<fb :header decoration="shorten"/><br />';
?>
<fb :tabs>
</fb><fb :tab-item href="<?php echo $homepage; ?>" < ?php if ($page == 'index.php'):?>selected="true"< ?php endif;?>></fb><fb :fbml-attribute name="title"></fb><fb :intl desc="The homepage">Home</fb>  
<fb :tab-item href="<?php echo $invitepage; ?>" < ?php if ($page == 'invite.php'):?>selected="true"< ?php endif;?> align="right"></fb><fb :fbml-attribute name="title"></fb><fb :intl desc="Invite tour friends">Invite your friends!</fb>  
 
< ?php
}
 
// Le wrapper (l"enveloppe) de notre appli
echo '<div class="page">';
 
// Appel d'une fonction qui permettra de savoir si l'utilisateur est connu par notre application (commenté pour le moment)
// $verif = is_user($user_id, $connection);
?>

Voici ensuite le code à insérer dans la page index.php:

< ?php
// On active le login pour récupérer l'id de l'utilisateur
$login = true;
// On affiche le menu de notre appli
$tabs = true;
// On appel notre header.php
require_once('header.php');
 
// La balise FBML fb:name permet de récupérer via l'id le nom et le prénom de l'utilisateur
echo '<h1>Bienvenue <fb :name uid="'.$user_id.'" />!!';
 
// On appel notre footer.php qui fermera le div .page et contiendra le pied de page
require_once('footer.php');

Et voici l’application en marche pour le moment rien de transcendant mais on a déjà l’ossature, pour la prochaine partie nous allons construire notre base de données et créer quelques fonction pour s’y connecter et la manipuler.

L'utilisateur doit d'abord autoriser votre application

Et voici le résultat!

Et voila c’est tout pour aujourd’hui, la suite au prochain épisode!

actu

Dropbox

Derrière ce titre (pompeux??) se cache une technologie en pleine effervescence, j’ai nommé le « on the cloud» , littéralement stocké ses données dans les nuages. Rassurez vous rien de nouveau Google le fait avec vos compte mails, votre agenda, vos documents et j’en passe et ce depuis des années.

En clair cela signifie que vos données ne sont pas stockés physiquement sur un serveur mais sur plusieurs serveur à travers le monde. Le principal avantage réside dans l’économie de ressource serveur et donc une meilleur répartition de la charge lorsque vous sollicitez tel ou tel service pour obtenir des données, le tout se déroule de façon transparente pour l’utilisateur.

J’aborde ce sujet très en vogue en ce moment pour vous parler d’un service qui se nomme Dropbox, ce service vous permet de stocker et synchroniser des données entre plusieurs postes. Au delà de la synchronisation qui est vraiment très pratique se service et tout simplement génial lors de la réinstallation/mise à jour d’un poste, que celui qui n’as jamais perdu de data en installant la dernière version alpha de telle ou telle distribution Linux me jette la première pierre. Le client est compatible et s’intègre à merveille avec n’importe quel système d’exploitation, pour ma part je l’ai testé sur mon laptop équipé de Ubuntu Jaunty (9.04) et sa simplicité d’utilisation m’a plus qu’impressionner.

L'interface en ligne Dropbox

L'icone de notification

Le dossier Dropbox

Pour l’installer sous Linux rien de plus simple votre distribution doit avoir ça dans ses dépôts ou vous devriez pouvoir trouver un paquet adéquate, une fois installé l’intégration est on ne peut plus simple vous choisissez l’emplacement du dossier dropbox (par défaut ~/dropbox) et ensuite il n’y a plus qu’a copié/collé dedans. A noter que vous pouvez aussi partager aisément des fichier en récupérant le lien public de ce dernier si vous le souhaiter (regarder le menu contextuel pour plus d’info). Ce paquet n’est pas libre il utilise une technologie propriétaire mais son équivalent libre ne devrai pas tarder à voir le jour.

actu

Sun Mycrosystem

Mark Shuttleworth s’exprime sur le rachat de Sun

Ubuntu 9.04

Ubuntu Linux sort en version 9.04

Gwibber 0.9.2

Gwiber, l’outil de microblogging passe en

actu

tuto

ATTENTION!

Ce paquet peut endommager votre système si vous ne savez pas ce que vous faites, je vous conseil donc de ne rien tenter car ce logiciel n’est pas nativement développé pour Linux.

 

A vos riques et périls

video

actu

Au menu de ce 23eme opus:
* Command and Conquer – La problématique de la ligne de commande.
* How-To : Programmez en C – Part 7, Web Development – Part 4, and communiquez autours d’Ubuntu – Part 2.
* My Story – Debenir un utilisateur d’Ubuntu
* Revue de lecture – Comment devenir un dieu parmi les geeks
* MOTU Interview – Steve Stalcup
* Top 5 – Gestionnaire de tâches
* PLUS: Plein de bonnes choses…

actu

actu

• Command and Conquer – Redimensionner vos images avec FFMPEG.
• How-To : Programmer en C – Part 6 & Web Developpement – Part 3 (installer une solution LAMP)
• Tuto: Installer CrunchEEE sur un EEE PC
• My Story – Du changement
• Book Review – Ubuntu pour les Non-Geeks 3rd Edition
• MOTU Interview – Emanuele Gentili
• Top 5 – Les logiciels pour ripper vos DVD
• PLUS: Les nouveaux jeux & co

tuto

actu

• * Command & Conquer: Formater les réponses (script bash disponible ici)
• * How to: Développer en C (part 5), Web développement (Part 2), Améliorer le ratio de rendu des vidéos et se faire un ordinateur avec une clef USB
• * My Story – Creative Zen V Plus et Ubuntu
• * Game Review – Tribal Trouble 2
• * My Opinion – Une opportunité raté…
• * MOTU Interview – Nicolas Valcarcel
• * Top 5 – Outils de Bitorrent
• * Et le résultat de l’enquête Fullcircle

actu

Video

actu

• Command and Conquer – L’utilisation du Terminal.
• How-To : Program in C – Part 4
• How-To : Web Developpement – Part 1
• How-To : Sauvegarde & Synchronisation Your Music.
• My Story – Faire de l’argent avec FOSS
• Revue de lecture – Ubuntu Kung Fu
• Mon Opinion – L’Italy parle OSS
• MOTU Interview – Andrea Colangelo
• Top 5 – Solutions de sauvegarde

actu

Le kernel Linux passe en version 2.6.8

Ubuntu, sortie de la première Alpha pour la 9.04

Cedega apporte le support de DirectX sous Linux!

Adobe 1.5 débarque sur la banquise

Court Mozilla! Court……

actu

• * Command and Conquer – Utiliser grep et find.
• * How-To : Programmer en C – Partie 3
• * Faire un point d’accés WIFI
• * Utiliser GIMP – Partie 8
• * Créer du contenu multimédia pour un mobile
• * My Story – Ubuntu John
• * Revue de lectures – Beginning Ubuntu Linux 3rd Ed
• * MOTU Interview – Emilio Monfort
• * Top 5 – Les outils de virtualisation
• * Nouveauté! Les jeux sous Ubuntu – Open Arena, un FPS qu’il est beau!

actu

• Command & Conquer: La gestion des paquets
• How-to: Developper en C (2eme partie), un disque réseau sécuriser, Utiliser Gimp (7eme partie) et Ubuntu 8.10
• My story: Ubuntu et moi…
• Review: Urban Terror
• My opinion – Il y a t’il trop de distribution Linux?
• MOTU interview: Harald Sitter
• Top 5 des applications pour concevoir visuellement ses projets

dossier

revue

actu

actu

dossier

video

actu

actu

actu

vidéo

actu

actu

actu

actu

actu

• Un nouveau pilote fait son apparition, permettant d’utiliser toutes les webcams conformes à la norme USB Video Class. Ainsi, un grand nombre de webcams de marque fonctionnent maintenant parfaitement avec Linux. Une liste des webcams conformes à USB Video Class testées avec Linux est disponible ici.
• Une variante de l’outil memtest86+, permettant de tester la mémoire vive pour y trouver des problèmes matériels, a été intégrée au noyau Linux, et est disponible en ajoutant l’option « memtest » aux options de démarrage du noyau. Cela évite de devoir installer un outil supplémentaire pour cela.
• Un déboggeur a été créé pour le noyau Linux, permettant de traquer plus facilement et plus efficacement les bugs. Nommé KGDB, il fonctionne sur les architectures x86 et Sparc, et nécessite deux ordinateurs pour effectuer le déboguage, qui se fait ainsi par le réseau.
• KVM, permettant la virtualisation directement dans le noyau Linux, est maintenant supporté par de nombreuses architectures supplémentaires qui sont tout d’abord IA64, très utilisé pour les serveurs, S390, et PowerPC.
• Et plein d’autres choses…

actu

actu

• Introduction à Ubuntu - Le choix de cette option présenterait au nouvel utilisateur une brève visite de Ubuntu (quelles sont les principales différences entre Ubuntu, Windows ou Mac OS X et peut-être une introduction à ce qu’est l’open-source et le logiciel libre)
• Visite guidée des nouvelles fonctionnalités – Présentation de quelques-unes des nouvelles fonctionnalités de cette version.
• Une barre de progression plus détaillée.

• Une meilleure intégration de Firefox 3 dans KDE. Il est dommage que tous les efforts déployés par l’équipe de Firefox pour une bonne intégration dans Gnome, soit tout l’opposé de ce qui est fait pour KDE.
• Support des réseaux 3G
• Amélioration de la performance et du temps de démarrage. Ubuntu n’est pas le plus rapide des systèmes à démarrer (c’est pas le pire non plus). Il apportera des améliorations dans la programmation multi-thread afin que le temps de démarrage soit moins long. Cela aura un impact particulier bien-sûr avec les processeurs multi-cœurs.
• S’il n’y a pas de retard de la part de OOo pour la sortie de OpenOffice 3, la suite bureautique sera présente dans Intrepid Ibex. Cette nouvelle version devrait normalement être publiée le 2 Septembre et Intrepid Ibex sort le 30 Octobre.
• La version de xserver qui sera utilisée sera la 1.5. On ne sait pas avec certitude si la version 1.6 sera disponible assez tôt pour permettre de l’implémenter dans Ubuntu 8.10. L’un des objectifs sur cette version est de réduire les bugs qui existent actuellement aux niveaux de la gestion de certaines résolutions.
• Amélioration de Wubi.
• Noyau Linux 2.6.26.
• Grub2 devrait commencer à être utilisé. Il apporte entre autres comme amélioration la sélection grâce à un menu graphique.

video

actu

actu

actu

actu

Actu

Actu

Video

Site officiel

news

Actu

video

Actu