Microsoft vient de dévoiler son nouveau projet, non pas un soft mais une table tactile, Surface. Il s'agit d'un écran de 30 pouces, capable d'interagir avec des objets communicants (appareil photo par exemple) grâce à des caméras infra rouges. Son interface utilisateur, très novatrice permet de manipuler des objets virtuels (photos, documents) mais également offre de nouveaux loisirs numériques (peinture par exemple).

Le site de Microsoft Surface montre bien les possibilités de ce produit tout droit issu des laboratoires de recherche de Microsoft.

Je suis toujours frappé par la capacité de Microsoft à mettre l'avenir à porter de main et surtout à transformer les résultats de leurs recherches au profit d'outils futuristes et surtout réalistes. Disponible fin 2007 à un prix réservé aux entreprises (Hotels, casinos...)

Les éléments graphiques du portail sont inclus dans un encadrement aux cotés arrondis. Cet encadrement peut prendre plusieurs couleurs et afin d'optimiser les développements j'ai réalisé un CustomControl très simple qui permet d'y inclure vos éléments. Nous allons donc voir comment ce CustomControl est utilisé dans l'interface graphique, ces implications au niveau des feuilles de style et la construction du CustomControl.

1. Utilisation du CustomControl

<elgee:Frame ID="FR12" runat="server" Couleur="jaune" Taille="275">

    <div class="billet_titre">Rechercher sur ce site</div><br />

    <div id="container_search_controls">

        <div id="google_search_form"></div>

        <div id="google_search_control"></div>

        <div id="live_search_container">

            <div id="live_search_query"></div>

            <div id="live_search_control"></div>   

        </div>

    </div>

</elgee:Frame>

Je prend l'exemple de la zone de recherche. Mon CustomControl s'appelle Frame et comme vous pouvez vous en rendre compte il inclut des éléments externes en son sein. Il dispose de 2 attributs, sa taille et la couleur à appliquer.

2. La gestion de l'apparence

On se basera donc sur une feuille de style. En se basant sur la valeur de l'attribut Couleur, on déclinera l'ensemble des éléments nécessaires au rendu graphique de l'encadrement.

.jaune_haut_gauche      {border-style: none; width:12px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut_gauche.png);background-repeat: no-repeat; line-height:0; font-size:0;}

.jaune_haut             {border-style: none; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut.png);background-repeat: repeat-x; line-height:0; font-size:0;}

.jaune_haut_droite      {border-style: none; width:14px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/haut_droite.png);background-repeat: no-repeat; line-height:0; font-size:0;}

.jaune_gauche           {border-style: none; width:12px; background-image: url(/App_themes/default/pics/box/jaune/gauche.png);background-repeat: repeat-y; line-height:0; font-size:0;}

.jaune_contenu          {border-style: none; background-color: #FFFFCC;}

.jaune_droite           {border-style: none; width:14px; background-image: url(/App_themes/default/pics/box/jaune/droite.png);background-repeat: repeat-y; line-height:0; font-size:0;}

.jaune_bas_gauche {border-style: none; width:12px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas_gauche.png);background-repeat: no-repeat; line-height:0; font-size:0;}

.jaune_bas              {border-style: none; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas.png);background-repeat: repeat-x; line-height:0; font-size:0;}

.jaune_bas_droite {border-style: none; width:14px; height:21px; background-image: url(/App_themes/default/pics/box/jaune/bas_droite.png);background-repeat: no-repeat; line-height:0; font-size:0;}

Il y a donc une classe pour chaque coin de l'encadrement, pour chaque coté et le contenu. La règle de nommage consiste à commencer par le nom de la couleur, suivi de sa localisation. Comme vous le voyez, j'ai choisi un format PNG, qui gère mieux la transparence que le GIF. Mais attention aux surprises sur les navigateurs de type IE6 qui ne gère pas la transparence du format PNG.

3. Le code du CustomControl

Dans les attributs de la classe du CustomControl on définit la propriété par défaut et l'apparence coté designer en indiquant le nom du tag, ici Frame. Ne pas oublier les accesseurs publiques des propriétés.

   [DefaultProperty("Taille"), ControlValueProperty("Taille"), PersistChildren(true), ParseChildren(false),

   ToolboxData("<{0}:Frame runat=server></{0}:Frame>"), PersistenceModeAttribute(PersistenceMode.InnerProperty),

 Designer(typeof(System.Web.UI.Design.ContainerControlDesigner))]

    public partial class Frame : System.Web.UI.WebControls.WebControl

    {

        public int Taille

        {

            get { return _taille; }

            set { _taille = value; }

        }

        public string Couleur

        {

            get { return _couleur; }

            set { _couleur = value; }

        }

        private string _couleur = "blanc";

        private int _taille = 200;

        int _width = 0;

Il est ensuite nécessaire de surcharger les deux méthodes RenderBeginTag et RenderEndTag pour ajouter notre code. Vous noterez que la taille fournie au CustomControl est la taille totale, à laquelle je retire 26, car mes deux bordures ont 13 pixels de large. J'opte plutôt pour une table, plus fiable qu'un DIV dans ce cadre là.  

        public override void RenderBeginTag(HtmlTextWriter writer)

        {

            base.RenderBeginTag(writer);

            //Controls.Clear();

            _width = _taille - 26;

writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _taille.ToString() + "px");

            writer.AddAttribute("cellpadding", "0");

            writer.AddAttribute("cellspacing", "0");

            writer.AddAttribute("border","0");

            writer.RenderBeginTag("table");     // Table container

            writer.RenderBeginTag("tr");        // TR de la premiere ligne

            writer.AddAttribute("class", _couleur + "_haut_gauche");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_haut");

writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_haut_droite");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

writer.RenderEndTag();          // Fin du TR de la premiere ligne

            writer.RenderBeginTag("tr");        // TR de la seconde ligne

            writer.AddAttribute("class", _couleur + "_gauche");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_contenu");

writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());

            writer.RenderBeginTag("td");

        }

        public override void RenderEndTag(HtmlTextWriter writer)

        {

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_droite");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

writer.RenderEndTag();          // Fin du TR de la seconde ligne

            writer.RenderBeginTag("tr");        // TR de la troisieme ligne

            writer.AddAttribute("class", _couleur + "_bas_gauche");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_bas");

writer.AddStyleAttribute(HtmlTextWriterStyle.Width, _width.ToString());

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

            writer.AddAttribute("class", _couleur + "_bas_droite");

            writer.RenderBeginTag("td");

            writer.RenderEndTag();

writer.RenderEndTag();          // Fin du TR de la premiere ligne

            writer.RenderEndTag();          // Fin de la table

            base.RenderEndTag(writer);

        }

    }  

Le tour est joué, votre CustomControl d'encadrement est fait. Reste plus qu'a jouer sur le panel de couleurs disponibles dans les feuilles de styles. Pour plus de fiabilité, on peut s'appuyer sur une énumération pour la liste des couleurs.

Nous allons voir ici l'architecture du portail en détail en insistant sur les principes de fonctionnement. La complexité des fichiers de paramétrage de SharePoint (qui soit dit en passant fait bien plus de choses que mon portail) a été une source d'inspiration pour concevoir l'architecture de cette application. Je vais donc vous expliquer comment les données sont hiérarchisées avec l'implication sur l'interface graphique, le modèle de paramétrage des différents espaces pour finir sur les multiples capacités de personnalisation du portail.

1.Hiérarchie des données

1.1. Un SiteMap issue de la base de données

J'ai décidé de m'appuyer sur un SiteMap pour la hierarchisation de mes informations, stocké en base. Un SqlSiteMapProvider a été utilisé pour obtenir les informations qui s'étalent sur 3 niveaux :

• Niveau 0, la home page
• Niveau 1, les espaces principaux
• Niveau 2, les sous espaces

Chaque élément de publication sera alors disposé dans un élément de niveau 2 obligatoirement. Les ID des espaces sont des entiers classés, c'est à dire qu'une requête en classant par ID vous donne automatiquement l'arborescence sans avoir à faire de la récursivité, gourmande en ressources. Le défaut est l'impossibilité de déplacer le moindre élément, contrainte que j'ai accepté dans ce développement.

L'ID du SiteMap ne sert qu'a simplifier le rendu. Chaque espace et sous espace dispose d'un raccourci. Ici le nom du raccourci est ACTIVITE.

L'interface graphique, au niveau de la navigation est alors générée automatiquement. Les zones à gauche et à droite de la liste des espaces de niveau 2 sont disposés dans un fichier de paramétrage. Il s'agit d'un fichier XML qui décrit les données à afficher à gauche et à droite en fonction du raccourci d'un espace de niveau 1.

1.2. Le pilotage de la zone de navigation

C'est au niveau de la classe qui dévire de MasterPage que le calcul de la localisation dans l'application se fait. En fonction de l'Url, l'application saura si elle se trouve sur la HOMEPAGE ou dans un espace de niveau 1 ou 2 connu. En fonction de l'espace de niveau 0 ou 1, l'application affichera automatiquement la bonne zone de navigation par défaut. Une variable de contexte est disponible également pour qu'au niveau du code on sache exactement dans quelle zone on se trouve. Cette donnée est vitale car elle permet d'afficher les bonnes données au bon endroit.

1.3.Le raccourci en cours, clé de la variation du contenu

C'est une variable d'environnement, disponible dans les classes dérivées de MasterPage, Page et UserControl qui permet coté serveur de savoir dans quelle espace on se trouve. La hiérarchie est ici respectée. Dans un espace de niveau 2, le plus bas, on ne disposera que des éléments de contenu de ce niveau. Par contre, dans un espace de niveau 1, on restitue l'ensemble des données de niveau 2 qui lui sont dépendants. Au niveau 0, sur la home page, c'est l'ensemble des données de niveau 2 qui est restitué.

1.4. La hierarchie conservée dans le contenu

Au sein de chaque espace, la hiérarchie du contenu est conservée au niveau des nuages de mots clés, du flux rss, des flux externes et des billets.

2. Le paramétrage des espaces

Comme je vous l'ai expliqué précédemment, chaque espace dispose d'une signature. Pour chaque signature, on trouvera un fichier XML de configuration qui lui est propre. Ce fichier décrit les UserControls à afficher et leurs localisations

2.1. La MasterPage, coeur de la disposition

On utilise ici la nouveauté du Framework 2.0 qu'est la masterPage. Schématiquement, il y a 4 zones dans la page :

• Le haut de l'interface
• Le contenu, au centre
• La zone de droite
• Le bas de page

Chaque zone est en fait un ContentPlaceHolder dans lequel les contrôles de base sont incorporés. Pour chaque zone, on dispose en plus de deux autres ContentPlaceHolder qui permettent d'intégrer dynamiquerment des UserControls dynamiquement. Dans les faits, la plupart des pages est vide, et c'est le paramétrage des espaces qui détermine le contenu.

2.2. Le fichier XML de paramétrage de l'espace

Lorsqu'une page est appelée, une variable de contexte détermine l'espace en cours et la signature de la page. Par défaut, il y a 4 signatures :

• DEFAUT, c'est à dire la page récapitulative
• VOIR, lorsque l'on visualise un billet particulier
• TAG, pour le résultat d'une recherche par mot clé
• ARCHIVES, lorsque l'on demande les publications d'un mois donné

Etant donné qu'il existe un fichier de paramétrage XML par espace, il est alors chargé dynamiquement puis désérialisé. Cela permet ensuite en fonction de la signature disponible dans le contexte, de charger dans chaque zone les UserControls adéquates. Il est aussi possible d'ajouter du code statique au dessus de la barre de navigation, personnalisant un peu plus le portail. Le thème peut aussi être affecté à l'espace. Il est indiqué dans la table du SiteMap et sera automatiquement appliqué. Il s'agit ici ni plus ni moins de l'exploitation de la notion de Theming d'ASP.Net 2.0.

Il est possible de passer des paramètres au UserControl non pas via une Interface mais via une Collection d'objets. La seule contrainte est de faire dériver tous ces UserControls de Business.Page.UserControl. Dans l'exemple ci dessus, sur la page principale de mon espace et dans la zone de droite, je charge 5 UserControls que je place avant ou après les contrôles standards de ma page définis dans le default.aspx.

2.3. La réécriture d'URL

L'application se limite donc à 6 pages ASPX ! Une page par signature, plus la homepage et les flux rss du site. Tout cela est fait grâce à l'implémentation du module UrlRewriter, légèrement retouché pour fonctionner avec Ajax. La réécriture transforme un chemin en arguments dans la requete HTTP vers une page destinatrice. Les efforts ont été fait pour veiller à la sécurité des données issues de l'interprétation de la réécriture d'Url. J'ai trouvé un autre module de réécriture qui m'a l'air plutôt complet.

3. Des capacités de personnalisation entières

3.1. La notion de liste

Restant fidèle à SharePoint, j'ai conservé cette notion de liste. Une liste est un ensemble d'informations ordonnées, comme un album de photos, un flux rss, un billet. Une table unique regroupe ces listes, simplifiant grandement la couche d'accès aux données et permettant une grande évolutivité.

3.2. Le module de lecture de flux RSS

Le portail dispose d'un module AJAX permettant la lecture d'un flux RSS externe, transformé via une feuille XSL. Pensant au départ faire la transformation coté client, je suis vite tombé sur les contraintes de sécurité et de CrossSiteScripting. La transformation est générée coté serveur et renvoyée ensuite au client.

3.3. Intégration de pages personnalisées

Il est bien entendu possible d'ajouter ces propres pages. Il suffit à l'initialisation de définir manuellement la signature et l'espace ! Vous aurez la possibilité d'ajouter une nouvelle signature à votre fichier de configuration pour que votre page charge dynamiquement des contrôles. Les pages spécifiques sont placés dans un chemin particulier (/specific) pour conserver la cohérence applicative.

3.4. L'interaction sur les META tags

Les META tags sont bien entendu alimentés sur le portail. Un certain nombre de UserControls interagissent sur les contenu des tags :

4. Les sources

Les sources sont utilisables et modifiables gratuitement pour toute personne physique. Faites moi part de votre souhait d'obtenir les sources. Je me ferai un plaisir de vous les faire parvenir. Pour les entreprises, me consulter par email.

Stadeo.tv, la chaîne des sports délaissés par les grands diffuseurs a été lancée ce week end avec un match de baseball du championnat de France Elite de très bon niveau. J'ai toujours fait partie de ceux qui ralaient de ne jamais voir de baseball dans les grands medias. Les temps ont changé : NASN est diffusée sur le bouquet Canal Satellite avec des commentaires en VO, mlb.com propose une multitude d'abonnements pour visionner des rencontres via internet en excellente qualité.

Premières impressions de Stadeo.tv : D'abord, le player a télécharger ! Plutôt surpris de ne pas utiliser un player "standard" de type RealPlayer ou Windows Media Player. Une qualité pleine écran plutôt moyenne, des commentaires qui tiennent la route, une réalisation plutôt bonne avec de bons ralentis mais un manque cruel d'images en infield, là ou se joue vraiment le baseball. On ne peut pas tout avoir et c'est je pense une question de moyens.

Stadeo était donc gratuit ce week end et il vous en coutera près de 8 € pour visualiser un match !!! C'est là que tout le business model tombe à l'eau. A titre de comparaison, un mois d'abonnement sur mlb.com coute 15 $ pour une bonne centaine de rencontres et une tripotée de caméras qui sont prètent à prendre sous tous les angles les home runs de Barry Bonds !!!

Aujourd'hui, la qualité du baseball français est au rendez vous, il n'y a pas de doute. Mais je connais peu de monde prêt a payer aussi cher. Une étude du Cabinet Forrester prévoit un pic des ventes de films et d'émissions sur les sites de videos en ligne payants pour 2007. La tendance est au gratuit et cela se confirme déjà. YouTube intègre de la pub dans ces videos, et l'arrivée prochaine de Joost tendrait à révolutionner les pratiques. Les 45 millions de dollars levés par Joost devraient aider.

L'avenir est donc au gratuit et j'ai peur que l'aventure Stadeo.tv soit éphémère. Selon Forrester, toujours, 9% des adultes ont achetés pour une moyenne de 14$ de videos sur Internet en 2006. Avec à la louche une populations de 10 000 personnes sensibles au baseball, ça fait une cible et un potentiel de revenus assez limité, bien que stadeo propose également la diffusion de football américain et de hockey.

Le modèle idéal serait de proposer un portail de rencontres sportives, dont la réalisation serait faite par les utilisateurs eux mêmes. Un portail mélant trucs et astuces de montage videos, vente de matériel, dépots des matches locaux, ouverture sur Joost...Voilà une belle idée de portail communautaire, financé par les revenus des ventes de matériel vidéo, de la pub et pourquoi pas de véritables rencontres produites par des professionnels...

Pour ceux que Joost intéresse, j'ai quelques invitations. Laissez moi un commentaire. Je ferai mon possible pour vous les envoyer.

Début Juin, les américains auront le loisir de se ruiner en achetant le téléphone portable le plus cher du monde : l'iPhone sort dans quelques semaines et Microsoft a décidé de répliquer à Apple sur l'aspect révolutionnaire de l'iPhone avec le oPhone.

Video: Microsoft's oPhone

Pour ceux qui ne l'auront pas encore remarqué, l'IPhone n'est rien d'autre qu'un PDA avec une interface plutôt réussie. Les premiers tests de l'IPhone ont montré une légère faiblesse coté autonomie.

Un spécialiste dans l'industrie du mobile m'avouait que tous les opérateurs se battent pour le proposer. Non pas pour en vendre, mais pour l'avoir. Ca fait classe disons de proposer à la vente l'iPhone. Ca fera rentrer du monde dans la boutique...

J'ai décidé d'héberger sur mon site la carte des terrains de baseball et softball de France. Pour cela, je m'appuie sur la très sympathique API de GoogleMaps.

4 choses à voir ensemble :

1. La géolocalisation d'un terrain : 

L'objectif est de fournir aux acteurs du baseball et du softball en France une carte précise des terrains. Que votre zone soit couverte finement par GoogleMaps ou pas, peu importe. En mode Carte, il sera très facile à vos visiteurs de préparer son voyage. Rendez vous sur cette page. Zoomez sur la carte, trouvez votre terrain. Cliquez alors sur la zone que vous avez géolocalisée. Si vous vous êtes trompés, recliquez sur le marqueur pour l'effacer.

Dès que c'est ok, remplissez le formulaire. Je le validerai rapidement.

2. La visualisation sur laurentgeffroy.com

La page suivante restitue les terrains qui ont été validés.

3. La visualisation sur GoogleEarth

Cliquez sur le fichier kml pour ouvrir GoogleEarth et naviguer avec le client riche.

4. L'intégration sur votre propre site

Le code Javascript suivant est copier dans votre propre site web et profitez de la carte dans votre propre application. N'oubliez pas de récupérer votre APIKey GoogleMaps pour l'utilisée avec votre domaine.

<html>
   <head>
      <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key={MON API KEY GOOGLE DEPENDANTE DU DOMAINE}" type="text/javascript"></script>
   </head>
   <body> 

<div id="google_map_viewer"></div>

<script type="text/javascript">
    //<![CDATA[
    var hauteur = '400px';
    var largeur = '400px';
    document.getElementById("google_map_viewer").style.width = largeur;
    document.getElementById("google_map_viewer").style.height= hauteur;
    var map;
    var geoXml = new GGeoXml("http://www.laurentgeffroy.com/params/GoogleMaps/5dfbdc88-d9f2-411f-a92d-e9f338ec0d93.kml");

    function GoogleMarkerLoader()
    {
   
        if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("google_map_viewer"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
           
            // Centre au milieu de la France
            var point = new GLatLng(47.129951,0.878906);
            map.setCenter(point, 6);
            map.addOverlay(geoXml);
        }
    }
   
    setTimeout("GoogleMarkerLoader()", 1000);
    //]]>
</script>

             
   </body>
</html>