Christophe Rousée

Je ne m’arrête plus En même temps c’est si facile !

Après le plugin AutoFF pour Seesmic Desktop 2, je me suis penché sur Yourls.
Ce script php permet d’implémenter votre propre raccourcisseur d’url, et il à le mérite d’avoir une api !

J’ai donc crée un plugin Seesmic qui vous permettra d’utiliser vos propres urls dans vos messages twitter, Facebook ou autres réseaux sociaux supporté par Seesmic Desktop 2.

Pour l’installer c’est par ici : Fichier XAP à copier dans le répertoire plugin de seesmic

Puis aller dans les settings pour configurer votre signature (http://mondomaine.com/admin/tools.php) et l’url du script api de Yourls (http://mondomaine.com/yourls-api.php)

Ensuite regarder dans la zone « link»

N’hésite pas à laissée vos impressions / questions.

I never stop At the same time it’s so easy!

After the plugin AutoFF Seesmic Desktop 2, I have studied Yourls.
This php script allows you to implement your own url shorteners, and it have an API !

So I created a Seesmic plugin that allows you to use your own urls in your posts twitter, Facebook or other social networks supported by Seesmic Desktop 2.

To install : copy this XAP file to the seesmic plugin directory

Then go into the settings to configure your signature (http://mydomain.com/admin/tools.php) and Yourls script API url (http://mydomain.com/yourls-api.php)

Then look in the area « link »

Feel free to let your impressions / questions.

Après mon plugin HelloTipi pour Seesmic Desktop 2. Je me suis amusé à faire quelque chose de plus simple.

Encore basé sur un site de Mrboo : AutoFF.
Ce plugin vous permettras de générer automatiquement votre liste de #FF ou #FollowFriday (vous avez le choix dans les settings).

Pour l’installer c’est par ici : Fichier XAP à copier dans le répertoire plugin de seesmic
Ensuite regarder dans la zone « more »

N’hésite pas à laissée vos impressions / questions.

Still based on a site Mrboo : AutoFF.
This plugin will automatically generate your #FF or#FollowFriday list (you can choose in the settings).

To install copy this XAP file to the seesmic plugin directory
Then look in the area « more »

Le 26 Mai c’est déroulé le reMIX2010 de Microsoft.
A cette occasion Loïc Lemeur fesait une démonstration du petit dernier de la gamme Seesmic : Seesmic Dektop 2 entièrement developpé en Silverlight et utilisant le framework MEF.

Il se trouve que j’avais commencé à developper un plugin sur cette plateforme pour HelloTipi.

Et comme le WEB est petit, le fondateur de HelloTipi MrBoo connaissait Loïc et lui as fait part de mon plugin, Loïc à été emballé et nous as proposé de l’accompagner sur scène lors de cette conférence afin de présenter mon travail.

Je remercie donc Loïc de m’avoir permis de parler 2 minutes sur scène, quoique finalement après avoir vu la vidéo et surtout entendu ma voix…

Photo souvenir :

@loic @ptirouz @mrboo

Tout est dans le titre, enfin on peut utiliser la version Visual Studio 2010 RC pour faire du RIA Services avec Silverlight 4 RC, ça a été annoncé au MIX 10 et relayé ici et là et sûrement autre part.

Au vu de cette nouvelle je m’empresse de tout télécharger et de tout installer comme expliqué dans les blog cité précédemment :

Bref récap :

1 – Désinstaller visual Studio 2010 Beta 2
2 – Désinstaller WCF ria Service si vous l’aviez déjà
3 – Installer Visual Studio 2010 RC et le framework 4.0
4 – Installer Microsoft Silverlight 4 Tools for Visual Studio 2010 RC (Dedans il y a le runtime et le sdk)
5 – Installer WCF RIA Service RC
6 – Installer WCF RIA Services Toolkit

C’était la partie facile (mais longue).

Ensuite tout content j’ouvre le projet bien entamé en Visual studio 2010 beta 2 + Silverlight 4 beta + WCF Ria Service beta, et là c’est moins drôle, ça ne compile pas, pleins d’erreurs,
après un moment d’angoisse, je regarde de plus près.
Il s’avère que les noms des assembly ont changé (merci pour la blague microsoft) , plus de System.Windows.Ria et ses copines.

Je cherche donc sur le net mais rien, je regarde donc de plus près et répare les dégâts en cherchant avec l’Object Browser de Visual Studio où sont passés mes petits.
Je décide de tout noter pour peut-être aider certaines personnes dans le même cas que moi, voici donc les changements que j’ai dû effectuer pour pouvoir enfin recompiler mon projet.

Les modifications présentées ici n’ont rien d’exhaustif

Coté client (App)

3 nouvelles assembly de base sont à  ajouter au référence du projet :

les 2 premières sont situées là : C:\Program Files\Microsoft SDKs\RIA Services\v1.0\Libraries\Silverlight et la troisième là C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client

• System.ServiceModel.DomainServices.Client.dll
• System.ServiceModel.DomainServices.Client.Web.dll
• System.ServiceModel.Web.Extensions.dll

Ensuite vous devez remplacer les using (un petit coup de find/replace) :

« System.Windows.Ria » par « System.ServiceModel.DomainServices.Client »
« System.Windows.Ria.ApplicationServices » par « System.ServiceModel.DomainServices.Client.ApplicationServices »

Ensuite si vous avez utilisé les DomainDataSource il faut dans un premier temps référencer System.Windows.Controls.dll situé dans C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client et ensuite
modifier la déclaration du namespace dans les fichiers XAML :

xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria"

devient

xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"

du coté de l’app.xaml il est aussi nécessaire de modifier le namespace qui sert à l’authentification :

xmlns:appsvc="clr-namespace:System.Windows.Ria.ApplicationServices;assembly=System.Windows.Ria"

devient

xmlns:appsvc="clr-namespace:System.ServiceModel.DomainServices.Client.ApplicationServices;assembly=System.ServiceModel.DomainServices.Client.Web"

Coté Serveur (App.web)

Ici aussi il y a du changement, au revoir :

• System.Web.DomainServices.dll
• System.Web.Ria .dll

Il faut dorénavant référencer :

• System.ServiceModel.DomainServices.Server.dll
• System.ServiceModel.DomainServices.Hosting.dll

Et si vous faites de l’Entity

System.Web.DomainServices.EntityFramework devient System.ServiceModel.DomainServices.EntityFramework.dll

Ensuite vous devez encore remplacer les using :

« System.Web.DomainServices » par « System.ServiceModel.DomainServices.Hosting »
« System.Web.Ria » par « System.ServiceModel.DomainServices.Server »
« System.Web.Ria.ApplicationServices » par «  System.ServiceModel.DomainServices.Server.ApplicationService« 

Dernière étape (pour moi et ce projet en particulier, je l’espère pour vous aussi) :

Quelques petites modifications dans le Web.config :

<add name="DomainServiceModule" type="System.Web.Ria.Services.DomainServiceHttpModule, System.Web.Ria, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

devient

<add name="DomainServiceModule" type="System.ServiceModel.DomainServices.Hosting.DomainServiceHttpModule, System.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

Voilà après ça, mon projet compilait et marchait de nouveau, j’espère avoir été assez clair et que ça pourra vous dépanner si vous êtes dans le besoin.

Un petit article bien sympathique (via @pocarles) qui je pense est proche de la réalité sur le métier de Développeur :

http://codingly.com/2008/12/29/degage-sale-programmeur/

Pour ma part cela fait plus de 8 ans que je développe pour gagner ma vie, mais j’ai commencé beaucoup plus tôt (je suis encore newbie par rapport à d’autre je sais) : mon premier programme il me semble était une application pour gérer mon argent de poche, développer en basic sur mon 386.

Vectra 386

Depuis je continue de développer en dehors du travaille, juste pour mon plaisir, pour plusieurs raisons :

• Tester les nouveaux langages / nouvelles méthodes, la veille est une partie importante du travail de développeur.
• La satisfaction de créer quelque chose qui fonctionne, qui pourrais aider des gens ou leur simplifier la tâche.

Et même si c’est parfois difficile, quand on arrive au bout de son développement et que le produit fonctionne, on as un sentiment d’accomplissement qui fait du bien. Puis suivent les coups de fils des clients … là c’est une autre histoire …

J’ai voulu ajouter à mon Tumblr un nouveau widget affichant mes coups de coeur musical sur LastFM.
Pour cela j’ai :

1. Besoin de récupérer le flux rss sur LastFM
2. Le parser
3. Afficher une liste des n derniers coup de coeurs
4. Intégration dans votre template Tumblr

1 – Récupération du flux

J’avais réalisé en local un code javascript qui marchait très bien, avec une XmlHttpRequest qui récupérait en GET le contenu du flux rss.

Mais une fois inclut dans mon Template ça ne fonctionnait plus, la faute au Cross Domain qui n’est pas autoriser dans la version 1 de XmlHttpRequest.

Après avoir chercher divers solutions, je suis tombé sur le site du zéro avec une explication simple, utiliser le level 2 de XMLHttpRequest ou la version Microsoft disponible dans IE8.

J’ai donc modifier mon code en utilisant l’exemple du site du zero pour arriver à ça :

function getXDomainRequest() {
	var xdr = null;

	if (window.XDomainRequest) {
		xdr = new XDomainRequest();
	} else if (window.XMLHttpRequest) {
		xdr = new XMLHttpRequest();
	} else {
		alert("Votre navigateur ne gère pas l'AJAX cross-domain !");
	}

	return xdr;
}

	window.onload = function(){

	    var xdr = getXDomainRequest();
	    xdr.onload = function() {
                ...
            }
       }
};

Vous remarquerez l’utilisation de l’évènement onLoad sur l’objet xdr et non plus onComplete ou onSuccess (cet évènement n’est pas disponible dans le level 1 de XMLHttpRequest)

Cependant cela ne suffit pas car LastFM n’as pas mis en place d’Access Control, je n’ai donc pas l’autorisation de récupérer les informations.

Je passe donc par un fichier php hébérgé sur un de mes serveurs qui fait le relais en utilisant CUrl, il reçoit l’url du flux rss en paramètre et le retourne.
La requête Ajax aura le droit d’interroger ce fichier car je lui ai paramètré un Access-Control pour tout domaine distant.
Voici le code de ce fichier :

<?php
	header("Access-Control-Allow-Origin: *");
	header('Content-Type: text/html; charset=utf-8');
	header("content-type: application/xml");

	$curl_handle = curl_init();
	curl_setopt($curl_handle,CURLOPT_URL, $_REQUEST['url']);
	curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
	curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($curl_handle,CURLOPT_GET,1);

	$res = curl_exec($curl_handle);
	curl_close($curl_handle);

	print $res;
?>

Une fois le fichier mis en place j’ajoute ces 2 lignes à mon code Javascript afin d’envoyer la requête asynchrone :

	xdr.open("GET", "http://static.ptirouz.net/tumblr/ajax_rss_call.php?url=http://ws.audioscrobbler.com/2.0/user/" + lastfmUser + "/lovedtracks.rss");
	xdr.send();

2 – Parsage du flux RSS

Maintenant que ma fonction javascript reçoit bien le contenu du flux rss, je dois le parser afin de garder uniquement les infos nécessaires.

On utilise bien entendu la réponse XMLHttpRequest au format XML à savoir this.responseXML, un bout de code vaut tous les mots :

var innerHTML = "";
var track, lien;

var bloc = this.responseXML.getElementsByTagName("item");
	if (nbtracks > bloc.length) {
		nbtracks = bloc.length;
	}

	for (i=0; i<nbtracks ; i++) {
		var subxml = bloc[i].childNodes;

		for (j=0; j<subxml.length; j++) {
			switch(subxml[j].tagName) {
				case "title" :
					track = subxml[j].firstChild.nodeValue;
					break;
				case "link" :
					lien = subxml[j].firstChild.nodeValue;
					break;
			}
		}

		innerHTML += "\t<li class=\"lovedtracks\"><a href=\"" + lien + "\">" + track + "</a>\r\n";
	}

3 – Affichage de la liste

Il y a plusieurs façon de faire, j’a choisi celle qui consiste à remplir un objet DOM déjà existant dans le template HTML de ma page, comme ça mon code javascript peut rester tranquillement dans la balise Header et être non obstructif :

Dans mon javascript je met la touche finale :

document.getElementById('lastfm').innerHTML = innerHTML;

4 – Intégration dans votre Template Tumblr

Maintenant que toute les pièces sont réuni reste plus qu’à l’intégrer à votre thème.

a – Ajouter les champs de configuration du widget :

b – Initialiser les variable Javascript :

c – Ajouter la référence au script créer précédemment qui à été ajouté statiquement à Tumblr :

d – Ajouter un peu de style :

	ul#lastfm {
		list-style-type:none;
		margin:0px;
		padding:0px;
	}

	li.lovedtracks
	{
		display:block;
		margin-bottom:3px;
	}

	li.lovedtracks a {
		color:#666;
	}
	li.lovedtracks a:hover {
		color: #0099cc;
	}

e – Afficher la liste :

{block:IfLastFMUser}
Mes coups de coeurs


{/block:IfLastFMUser}

f – Paramétrage :

Il ne reste plus qu’as paramétrer votre utilisateur LastFM et le nombre de coup de coeur à afficher dans l’onglet Appearance

Pour fini un petit aperçu sur mon site :

Aperçu Widget Lastfm pour Tumblr

Dans ce monde en temps réel on sait ce que chacun fait (statu facebook ou twitter), écoute (lastfm, msn, skype).

Pour compléter ça j’ai créer sur mon Tumblr le widget « En ce moment je lis« , qui permet d’afficher une couverture, le titre et le nombre de pages lus de votre livre actuel.

Pour le mettre en place il faut modifier le thème html, si ce n’est pas déjà fait vous devez dans un premier temps activer la personnalisation du HTML comme cela :
dans la page http://montumblr/customize, cliquer l’onglet Theme puis Use custom HTML

Dans les premières lignes ou il y à déjà des balises META, insérer ce code :

<meta name="image:Book Cover" content=""/>
<meta name="text:Book Title" content=""/>
<meta name="text:Book SubTitle" content=""/>
<meta name="text:Book Volume" content=""/>
<meta name="text:Book Author" content=""/>
<meta name="text:Book PagesRead" content=""/>
<meta name="text:Book PagesNumber" content=""/>

Puis à l’endroit de l’affichage voulu ajouter le code ci dessous :

{block:IfBookTitle}
En ce moment je lis

		{block:IfBookCoverImage}
			
		{/block:IfBookCoverImage}

		{block:IfNotBookCoverImage}
			{text:Book Title}{block:IfBookSubTitle}, {text:Book SubTitle}{/block:IfBookSubTitle}{block:IfBookVolume} ({text:Book Volume}){/block:IfBookVolume}{block:IfBookAuthor} de {text:Book Author}{/block:IfBookAuthor}
		{/block:IfNotBookCoverImage}

		{block:IfBookPagesRead}
			pages {text:Book PagesRead}{block:IfBookPagesNumber}/{text:Book PagesNumber}{/block:IfBookPagesNumber}
		{/block:IfBookPagesRead}
	

{/block:IfBookTitle}

Une fois ce code mis en place et sauvegarder, cliquer sur Appearance, vous devriez avoir quelques infos supplémentaire à remplir :

Si vous désirez modifier ou bien créer vous même un widget, aller sur la page d’aide qui est très bien faite et le code est simple à comprendre.

Pour le premier billet de ce blog dédié au développement, je ressort une classe que j’ai faite il y a quelques temps mais qui m’est très utiles.

Elle permet via la classe DataContractJsonSerializer apparu avec WCF dans le Framework 3.5 et contenu dans l’assembly System.ServiceModel.Web de sérialiser une réponse JSON (string) en un objet .Net de façon générique.

Pour cela on utilise le concept de paramètres de type, qui sera situé entre les « <> » :

public static T Deserialize(string jsonString)

Le T (on peut mettre ce que l’on veut) précisera donc le type du paramètre et pourra être utilisé dans le corps de la fonction et même en tant que type de renvoi de la fonction.

Voici le code de cette classe qui finalement est très simple :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
using System.Net;

namespace PTiRouZ.Net.Api
{
    /// 

    /// Class permettant de convertir le code Json en objet .Net
    /// 
    public static class serializeTools
    {
        /// <summary>Déserialise une chaine Json en Object .Net</summary>
        /// <typeparam name="T">Type de l'Objet .Net de sortie</typeparam>
        /// <param name="jsonString">Chaine Json</param>
        /// <returns>un objet .Net de type <typeparamref name="T"/></returns>
        public static T Deserialize<t>(string jsonString)
        {
            using (MemoryStream ms = new MemoryStream(Encoding.Unicode.GetBytes(jsonString)))
            {
                DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(T));
                return (T)serializer.ReadObject(ms);
            }
        }

        /// <summary>Sérialise un Object .Net en une chaine Json</summary>
        /// <typeparam name="T">Type de l'Objet .Net en entrée</typeparam>
        /// <param name="ClassObject">Object .Net de Type <typeparamref name="T"/></param>
        /// <returns>Une chaine Json</returns>
        public static string Serialize<t>(T ClassObject)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(T));
                serializer.WriteObject(ms, ClassObject);
                return Encoding.Default.GetString(ms.ToArray());
            }
        }
    }
}

Les objets .Net cible doivent implémenter des DataContract et DataMember situé dans l’assembly System.Runtime.Serialization qui permettront la(dé)sérialisation.

[DataContract]
    public class site_albums
    {
        /// 
Identifiant de l'album
        [DataMember]
        public int id { get; set; }

        /// 
nom de l'album 
        [DataMember]
        public string name { get; set; }
    }

Pour créer ce blog j’ai installé WordPress, et j’ai voulu faire un peu de customisation, en commençant déjà par changer le thème de base (qui est très bien mais bon…)

Mais voila que je tombe sur un premier problème :
Impossible de localiser le dossier de contenu de WordPress (wp-content).

Pourtant j’ai installer tout comme il faut, peut être parce que je ne suis pas à la racine ? problème de Chmod ? de Chown ? j’ai tout modifié sans résultats.

Et j’ai trouvé ça sur le site de WordPress Francophone

Copier les lignes suivantes à la fin du fichier wp-config.php

/** Override default file permissions */
if(is_admin()) {
add_filter('filesystem_method', create_function('$a', 'return "direct";' ));
define( 'FS_CHMOD_DIR', 0751 );
}

ça permet d’évincer la page qui demande les identifiants ftp si on et connecté en tant qu’administrateur.

Je me doute que ce n’est pas la solution idéal mais pour l’instant je n’ai pas trouvé mieux, si vous avez des idées, je vous écoute.

Ensuite je veut ajouter une extensions pour la mise en forme des code sources :

Après avoir choisi Syntax Highlighter and Code Prettifier Plugin for WordPress de Vijesh Mehta, Voila que j’ai un problème de saut à la ligne après chaque mot clés :

Erreur de retour à la ligne

J’ouvre donc FireBug (dispo sous chrome) et me voila à la recherche du style parasite, et je le trouve dans la feuille de style de mon thème :

code {padding:5px; font-size:1.2em; display:block; margin: 5px 0 16px 0; background-color:#f4f4f4; border:1px solid #ccc;}

Une fois mis en commentaire le display:block, c’est bon la mise en forme et correct et vous pouvez désormais lire le prochain billet dans les meilleurs conditions.

Salut,
J’ai déjà essayé par le passé de tenir un blog au niveau personnelle mais comme je ne suis pas un grand écrivain je n’ai jamais réussi à en sortir des choses intéressantes, à part mes photos de vacances et quelques vidéos récupérer sur youtube ou dailymotion

J’ai donc décidé d’essayer de faire un blog sur les choses que je connais, et sur lesquels je travaille tout les jours, le développement, la programmation, la prise de tête quotidienne pour que ce p?§$£% de caractère UTF-8 s’affiche correctement !

On est tous confronté à ces petits problèmes qui nous pourrissent la journée alors que ça aurait du prendre 5 minutes …

Je vais donc mettre sur ce blog toutes les solutions, tips que j’ai trouvé afin peut être t’aider d’autres personnes dans le besoin…

Les sujet seront nombreux car j’ai un champ d’action large dans mon boulot : Php, Xsl, Xml, WPF, WCF, Silverlight, C# … et je pense également divers choses touchant au web.

Sur ces quelques mots je vous laisse avec le premier billet qui lui même donne une solution à un problème que j’ai eu pour écrire le 3ème billet …