Connaissez vous le  site www.box.com qui propose du stockage en ligne gratuit à hauteur de 5Go ?

Si comme moi, vous êtes confrontés à l'impossibilité de monter un volume DAVFS en tant que simple utilisateur (non root) vous devez passer la commande suivante:

Permalink | Leave a comment  »

play-blog-sample.zip Download this file

#> cd play-blog-sample

#> play dependencies

#> play run

#> play eclipsify

#> play test

Permalink | Leave a comment  »

In a next post, I will write a brand new tutorial about the TDD agile method on development process.

Stay tuned !

Permalink | Leave a comment  »

Permalink | Leave a comment  »

While I am trying to rescue my good old console, It did not survive more than 45 minutes to the last heat treatment. Dear Microsoft Console, rest in peace !

illustration from :http://www.xboxgen.fr/noire-surchauffe-playstation-3-80-60-fat-rockstar-games-sony-firmware-actualite-14059.html

Dear Santa Claus, please, could you bring me a brand new one like in the following pack ?

illustration from : http://www.trouvetaxbox.com/index/bundles/id/9

Permalink | Leave a comment  »

So , using a heat gn, I re'warm  Console Circuit for a second round.

Hope that IC will survive to this treatment.

Lucky, or not lucky ?

Permalink | Leave a comment  »

Et Hop, quelques nouveaux jeux en tests sur nos consoles

Intro

Ainsi, Côté Wii, on trouvera My Fitness Coach et Just Dance 2, côté X360, on trouvera NFS Hot Pursuit, Enslaved, Mafia 2 et enfin Dungeon Siege 3.

A part une petite faiblesse du côté de "My Fitness Coach", tous sont de très bon jeux !

Quelques Notes

	My Fitness Coach / Wii Un habillage graphique pauvre, mais un fond plein de bonne volonté, sans doute le moins bon des 6 jeux présentés ici. Le nombreux mouvements disponibles font honneur au joueur prompt à progresser. 12/20
	Just Dance 2 / Wii Le jeu s'annonce comme la parfaite évolution de son prédécesseur. J'ai l'impression que les développeurs ont pris note des remarques des joueurs ! En effet, les graphismes sont incroyablement améliorés, tout en gardant l'esprit de la série, mais en refondant l'habillage de façon intelligente. 16/20
	Dungeon Siege 3 / X360 Le successeur pour moi de "Dark Alliance" sur PS2. Ce jeu est incroyablement sympa à deux en simultané. Parfois un peu dur, il faut s'accrocher pour refaire certains passages plusieurs fois et arriver a battre ces satanées bestioles... Graphiquement à la hauteur de ce que l'on peut attendre de ce genre de jeu. Certes, nous sommes à des lieux d'un "Gears of War 3", mais on s'éclate largement sur ce jeu. 16/20
	Enslaved, Odyssey to the west / X360 Un bon jeu d'arcade/action à la Namco, comme ils savent si bien les faire ! On en redemande. Graphiquement très élaboré et proposant un vrai monde, la découverte de nouveau lieu est toujours un plaisir visuel. Il est peut-être un peu trop linéaire, mais c'est le genre qui veux cela. Le duo "Gros-Bras-Musclés" / "Top-modèle-super-intelligente" marche plutôt bien. Le fait de pouvoir donner quelques ordres de bases à Trip (la fille, donc) donne un dimension supplémentaire au jeu. 17/20
	Mafia II / X360 Pour moi, Mafia 2 est le successeur de GTA4. Tout est là pour faire revivre cette ambiance particulière de l'après guerre en Amérique. La bande son n'est pas en reste non plus, car on retrouve les grands standards de cette époque. L'immersion est d'autant plus réussie que les graphismes sont somptueux et les acteurs numérique, car je pense qu'on peut parler de cela, sont incroyables de réalisme. A voir donc ! 18/20
	NFS Hot Pursuit / X360 Le retour ENFIN de Need For Speed. Non, pas les jeux underground, Most wanted, World ou autre Undercover et Shift, mais celui de l'origine, celui qui est une course poursuite "police contre méchant", comme en 1994, lors de la sortie de The Need For Speed sur Playstation (la psone, pas la 2, ni la 3 :) Bref que du bonheur de (re)jouer à ce jeu, qui a profiter des bénéfices de la technologie pour faire un grand ravalement de façade :) 17/20

Conclusion

Voila, Fin des micro-tests pour aujourd'hui. Mais noter ma légère préférence :) pour les jeux X360 de cette fournée.

Bon jeu !

Permalink | Leave a comment  »

Permalink | Leave a comment  »

then in preferences, click on "Labs" (here "Labos because UI is in french"):

Permalink | Leave a comment  »

Help, please help me !

Wrong manipulation of usb wire drive me to unplug accidentally my external hard drive. So the bad news is the partition table has been altered and I am unable to reactivate (recreate) the right partition's table. Anybody can help me to find the right tool to restore such table ? Thanks in advance.

McG

Permalink | Leave a comment  »

Et voila, mon bonhomme fete ses 4ans ! Et ce avec force Lego Miners et Lego Atlantis... Punaise, qu'ils grandissent vite ces enfants :)

Permalink | Leave a comment  »

It's amazing to see what you are able to create with a small piece of code and a Great UI designer like Glade (for gnome).

Please, go, see and test the following video :

Have Fun and Code Now !

Permalink | Leave a comment  »

var tobi = require('tobi') , 
    app = require('./my/app') , 
    browser = tobi.createBrowser(app); 
browser.get('/login', function(res, $){ 
    $('form') 
      .fill({ username: 'tj', password: 'tobi' }) 
      .submit(function(res, $){ 
        res.should.have.status(200); 
        res.should.have.header('Content-Length'); 
        res.should.have.header('Content-Type', 'text/html; charset=utf-8'); 
        $('ul.messages').should.have.one('li', 'Successfully authenticated'); 
        browser.get('/login', function(res, $){ 
            res.should.have.status(200); 
            // We are finished testing, close the server app.close(); 
            $('ul.messages').should.have.one('li', 'Already authenticated'); 
        }); 
    }); 
});

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Permalink | Leave a comment  »

Sous Linux, voir ce post qui explique comment procéder pour générer un fichier à jour grâce à aspell.

c:\> eclipse.exe -nl en

Permalink | Leave a comment  »

New Play! App

Create a new Play site:

 
c:\> play new MySite 
~        _            _
~  _ __ | | __ _ _  _| |
~ | '_ \| |/ _' | || |_|
~ |  __/|_|\____|\__ (_)
~ |_|            |__/   
~
~ play! 1.2.1, http://www.playframework.org
~
~ The new application will be created in /home/frederic/Projects/Java/play/MySite
~ What is the application name? [MySite]
~
~ OK, the application is created.
~ Start it with : play run MySite
~ Have fun!
 

Dependencies

see here for more information http://www.playframework.org/documentation/1.2.1/dependency
Edit dependencies with the dependencies.yml file:

figure 4 - Browser on a new Play! running project

Permalink | Leave a comment  »

Why not using an intuitive language to explain to other language what to do ?  This is the basic idea for the "Zen Coding" tool !

Just write some simple hieroglyph like line bellow, and execute the "zen coding transformation":

#page>div.logo+ul#navigation>li*5>a

The you will get :

<div id="page">
        
        <ul id="navigation">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
        </ul>
</div>

Cool tool, no ?

have a try in your favorite code editor !

you can also discover Zen Coding power through the following video:

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.

Permalink | Leave a comment  »

Extrait du chapitre 2.4 du livre que je suis en train d'écrire sur le Play!framework. Le but de ce livre est la découverte de l'utilisation du framework Play! au travers d'un exemple de site web communautaire de partage de liste de jeux video.

 affichage de la liste de jeux

Comme prévu, nous souhaitons créer notre propre page d’accueil (sinon, où est l’intérêt ? :)

Aussi, voici ce que nous souhaitons obtenir en première étape: l’affichage de la fiche d’un jeu vidéo:

^{figure 2.4.1 – Fiche d’un jeu vidéo}

Ce qui se traduit côté code “HTML/Groovy” par les lignes suivantes dans le fichier app/view/Application/index.html:

#{extends 'main.html' /}
  <div id="games" class="games">
    <h1>&{'home.games.title'}</h1>
    #{if games}
      #{list items:games, as:'game'}
        #{set title:'Home / '+game.platform+'/'+game.title /}
        <div class="game" id="game_${game.id}">
                        <div class="title">
                    <span>#${game.id}.</span>
                    ${game.platform}/${game.title}
                        </div>
           <div class="side">
            #{if game.cover}
            <div class="cover">
              <img src="public/images/games/${game.platform}/${game.title}/cover/${game.cover}.resized"
                title="${game.platform}/${game.title}" width="60"/>
            </div>
            #{/if}
            <div class="tags">
            </div>
          </div>
          <div class="info">
            #{if game.description}
            <div class="label">&{'home.games.game.description'}</div>
            <div class="bloc">${game.description}</div>
            #{/if}
            #{if game.testContent}
            <div class="label">&{'home.games.game.test'}</div>
            <div class="bloc">${game.testContent}</div>
            #{/if}
          </div>
        </div>
      #{/list}
    #{/if}
    #{else}
      <p>&{'home.games.noitems'}</p>
    #{/else}
  </div>

^{listing 2.4.1 – Template index.html pour l’affichage de la liste des jeux}

les notations

On distingue plusieurs notations utiles qui vont permettre le rendu de plusieurs types d’informations issues de différentes sources:

• &{} permet l’affichage de messages issus des fichier "messages.[langue]", exemple: &{'home.games.title'},
• ${} permet l’affichage de variables d’entités,
• #{} permet les tests de structures et boucles.

Les méthodes intéressantes sont:

• #{if}#{/if} délimite une condition,
• #{else}#{/else} délimite le cas échéant de la condition,
• #{list items:[liste], as:'[item]'} permet de parcourir une liste [liste] avec comme index l’objet [item]. il est alors possible de référencer chaque occurense dans la liste par “[item].attribut”, où attribut est un attribut valorisé de l’occurence.

Par exemple, la génération d’une liste de prénoms d’utilisateurs:

<ul>
        #{list:users, as: 'user'}
        <li>@user.firstname.</li>
        #{/list}
    </ul>

^{listing 2.4.2 – Exemple de boucle pour l’affichage d’une liste}

Référons nous à la documentation présente sur le site de Play! pour découvrir toutes les subtilités de Groovy, qui est le langage utilisé ici.

note: si nous n’avons pas accès à internet pendant le dévelopement, pour une raison quelconque, nous pouvons accèder à tout moment à la documentation de Play! en démarrant le serveur play intégrer (commande play start@) dans un projet vierge (par exemple) et en appelant l’urlhttp://localhost:9000/@documentation.

template des pages

Notons l’importance de #{extends main.html /} qui permet à notre page d’hériter de la mise en page de notre site située dansapp/view/main.html.

Pour le moment, cette page se résume à :

<!DOCTYPE html>
    <html>
        <head>
            <title>#{get 'title' /}</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
            #{get 'moreStyles' /}
            <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
            <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
            #{get 'moreScripts' /}
        </head>
        <body>
            #{doLayout /}
        </body>
    </html>

^{listing 2.4.3 – Template de base des page : main.html}

Nous constatons l’utlisation du doctype HTML5. Nous ferons abstraction des nombreuses déclarations de début de fichier pour nous concentrer sur celles qui méritent toute notre attention:

#{doLayout /}

C’est via cette simple balise que toutes les pages héritant de main.html (#{extends 'main.html'}) verront ici leur contenu inséré.

Modifions maintenant l’aspect globale de notre site en personnalisant le template app/views/main.html :

Ajoutons la zone de titre (header) et la zone de pied de page (footer):

<!DOCTYPE html>  
  <html>
      <head>
          <title>#{get 'title' /}</title>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">
          #{get 'moreStyles' /}
          <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
          <script src="@{'/public/javascripts/jquery-1.4.2.min.js'}" type="text/javascript" charset="utf-8"></script>
          #{get 'moreScripts' /}
      </head>
      <body>
        <header>
          <h1>&{'site.title'}</h1>
          <h2>&{'site.subtitle'}</h2>
          <nav class="menu">
            <ul>
          #{if !user}
              <li>&{'home.actions.login'}
                          </li>
          #{/if}
          #{if user}
              <li>&{'home.actions.logout'}
                          </li>
          #{/if}
            </ul>
          </nav>
        </header>
        <section id="content">
            #{doLayout /}
          <div class="clear"></div>
        </section>
        <footer>
          <p>&{'site.footer.label'} - &{'site.footer.credits', "http://www.famfamfam.com/lab/icons/silk/"}</p>
        </footer>
      </body>
  </html>

^{listing 2.4.4 – refonte de main.html pour intégrer entête, menu et pied de page}

Nous notons dans la ligne :

<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/main.css'}">

qui charge la feuille de styles pour notre site, le chemin vers la feuille de styles est calculée par le tag @{’/public/stylesheets/main.css’}.

Mais regardons de plus près la commande #{get 'moreStyles' /}. Celle permettra dans tout sous-template d’ajouter la définition d’une feuille de styles supplémentaire, sans avoir a la référencer systématiqement dans le template de la page.

...
        #{set 'moreStyles'}
        <link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/xxx.css'}" />
        #{/set}
...

^{listing 2.4.5 – Ajout d’un style dans un sous template qui sera généré dans le main.html}

Il existe également le #{get 'moreScripts'}, procédant de la même manière pour les fichiers javascript.

note: Notons le copyright en fin de page relatif aux icônes que nous avons embarqué dans nos pages, icônes qui proviennet dewww.famfamfam.com.

Découpage du modèle de page

Nous allons diviser notre page de la manière suivante:

HTML
    HEADER
      NAV "menu"
    SECTION "content"
    FOOTER

• Le header est l’entête de page, contenant titre, sous-tire, et nav, le menu de navigation,
• La Section “content” contient (sic!!) les données à afficher, ici les fiches des différents jeux vidéo,
• le Footer est le pied de page, contenant le information traditionnelle de copyright et autres informations utiles (Il est utilisé depuis peu également comme sources d’information pour les fils RSS par exemple).

^{figure 2.4.2 – Page d’accueil personnalisée}

Fonction de filtrage et de recherche sur la liste des jeux

Filtrage par platforme

Ajoutons maintenant, en plus de la liste de jeux, un moyen de filtrer celle-ci par un type de plateforme. Pour cela, nous devons récupérer une liste des valeurs distinctes du champs platform dans l’entité Game.

MODIFICATION DU CONTRÔLEUR

le contrôleur Application doit être modifier pour ajouter une liste de plateformes dans les objets mis à disposition du render. Aussi, nous devons modifier la méthode index() comme ci-dessous:

static void index(){
    ...
    List<Game> platforms = Game.find(
        "select distinct g.platform "+
        "from Game g "+
        "order by g.platform").fetch();
    ...
    render(games,platforms);
  }

^{listing 2.4.6 – Ajout de la liste des plateforme de jeux a dessein de filtrage de la liste des jeux}

TAG #{PLATFORMS /}

Intégrons une nouvelle notion: les tags ! Grâce à ce nouvelle élement, nous allons pouvoir éviter les répétitions de code dans les templates. Nous souhaitons afficher dans nos page la liste des platformes. Pour cela, créons un nouveau fichier app/views/tags/platforms.html:

#{if _userConnected}
        #{if _items}
                <h2>&{'home.platforms.title'}</h2>
                <ul>
                    <li>
                            
                                    &{'home.platforms.filter.showAll'}
                    </li>
                #{list items:_items, as:'platform'}
                    <li>
                            
                                    ${platform}
                    </li>
                #{/list}
                </ul>
        #{/if}
#{/if}

^{listing 2.4.7 – Affichage de la liste des plateformes de jeux}

Ensuite, dans le template de page index.html, nous référencerons ce nouveau tag dont la notation est la suivante:

#{platforms items:platforms, userConnected:user}

TAG #{GAMES /}

Nous allons en profiter également pour créer un tag pour la liste des jeux, qui nous sera utile dans le paragraphe suivant, concernant la recherche par nom, le fichier du tag sera :app/views/tags/games.html.

#{if _userConnected}
        #{if _items}
        <h2>&{'home.games.title', _userConnected?.username}</h2>
            #{list items:_items, as:'game'}
                #{set title:'Home / ' + filterPlatform /}                
                <div class="game" id="game_${game.id}">
                    <div class="title">
                            <span>#${game.id}.</span> 
                                    ${game.title}
                    </div>
                    <div class="side">
                        #{if game.cover}
                        <div class="cover">
                            
                                    
                        </div>
                        #{/if}
                        <div class="tags">
                        </div>
                    </div>
                    <div class="info">
                        <span class="platform">
                                ${game.platform}
                        </span>
                        #{if game.description}
                        <div class="bloc">${game.description}</div>
                        #{/if}
                    </div>
                </div>
            #{/list}
        #{/if}
        #{else}
            <p>&{'home.games.noitems'}</p>
        #{/else}
#{/if}
#{else}
        <p>&{'home.anonymous.welcome.message',"Register/create","Goto to Register form"}</p>
#{/else}

^{listing 2.4.8 – Tag #{games/} présentant la liste des jeux}

note: Nous nous proposerons d’enrichir notre liste de jeux avec l’utilisation de Jquery lightbox, un plugin permettant l’affichage modal des images des couvertures des jeux dans un prochain chapître.

TEMPLATE INDEX.HTML

Ainsi, dans le template app/views/Application/index.html nous intégrons les deux nouveaux tags; la liste des platformes #{platforms /} et la liste des jeux #{games /} :

#{extends 'main.html' /}
        <section id="platforms" class="platforms">
                #{platforms items:platforms, userConnected:user /}
        </section>
        <section id="games" class="games">
                #{games items:games, userConnected:user/}
        </section>

^{listing 2.4.9 – Intégration de nos nouveaux tags #{platforms/} et #{games/}}

Ce qui nous donnera dans notre navigateur:

^{figure 2.4.3 – Intégration de la liste des platformes dans la page d’accueil}

Recherche par un nom (title) de jeu

Nous souhaitons pouvoir proposer une recherche sur le nom d’un jeu afin de retrouver rapidement la fiche d’un jeu. Nous allons donc réaliser un filtrage sur le titre du jeu (Game.title).

Pour cela, ajoutons un champs de recherche. Editons le fichier du tag app/views/tags/platforms.html pour ajouter un tag input de type texte portant le nom search, au tout début de la section platforms :

#{if _userConnected}
                <section id="searchForm">
                        <label for="search">&{'home.search.label'}</label><br />
                        <input type="text" name="search" id="search" size="25" maxlength="40"/>
                        <script type="text/javascript">
                        $("#search").keyup(function(event) { // retour simple
                                if(event.keyCode==13){
                                        $.post('@{Application.filterByGameTitle()}',
                                                        {search: $("#search").val()}, 
                                                        function(data){
                                                                $('#games').html(data);
                                                        }
                                        );
                                }
                        });
                        </script>
                </section>
                #{if _items}
                        ...
                #{/if}
        #{/if}

^{listing 2.4.10 – champs search dans la section searchForm}

Ainsi, la recherche est poussée via JQuery et son composant $.post(). Ceci évite un rechargement complet de la page en ciblant uniquement la zone de la liste des jeux.

Modifions le controleur Application et ajoutons la méthode filterByGameTitle() comme ci-dessous pour réaliser le traitement de recherche:

/**
         * Recherche dans la liste de jeux de l'utilisateur connecté des jeux
         * contenant la chaîne <code>search</code> dans le titre du jeu. Se base
         * également sur la plateforme sélectionnée et sur l'utilisateur connecté.
         * 
         * @param search
         *            nom ou partie du nom de jeu à rechercher
         */
        public static void filterByGameTitle(String search) {
                renderArgs.put("search", search);
                // récupération de l'utilisateur connecté
                User user = (User) renderArgs.get("user");
                // recupération de la plateforme (si présente)
                //String platform = (String) renderArgs.get("filterPlatform");
                // Constitution de la liste des plateformes distinctes
                List<Game> platforms = Game.find(
                                "select distinct g.platform from Game g order by g.platform")
                                .fetch();
                // recherche des jeux correspondant à game.title=%search% et
                // game.platform=platefom
                List<Game> games = Game.find(
                                "select g from Game g " + "where lower(g.title) like ? "
                                                + "and g.author=? " + "and g.publish=true "
                                                + "order by g.platform, g.title ",
                                "%" + search.toLowerCase() + "%", user).fetch();
                // rendu de la page
                renderTemplate("Application/search.html", games, user, platforms);
        }

^{listing 2.4.11 – recherche de jeux correspondant à la saisie du champs search}

Ainsi, il nous faut créer un template pour le rendu du résultat de la recherche: ce sera app/views/Application/search.html

#{games games:games, user:user /}

^{listing 2.4.12 – template d’affichage du resultat de recherche: search.html}

Simple non ?

Nous obtenons alors le rendu suivant dans notre navigateur:

^{figure 2.4.4 – Recherche par titre et filtre sur les plateformes}

Permalink | Leave a comment  »

Extrait du chapitre 9.1 du livre que je suis en train d'écrire sur le Play!framework. Le but de ce livre est la découverte de l'utilisation du framework Play! au travers d'un exemple de site web communautaire de partage de liste de jeux video.

Qui n’a pas pester contre la recopie de nombreuse fois d’une même portion de code HTML dans une page, destiné au rendu d’un objet ?
Avec la possibilité de créer des tags aussi facilement qu’on écrit une vue dans Play !, il serait réellement dommage de passer à côté.

Définition

Le tag un simple fichier HTML dans le répertoire views/tags. Le nom du fichier va fixer le nom du tag: view/tags/mytag.html donnera accès au tag « mytag ».

mon tag

Appel

L’appel à notre tag se fera via la balise #{mytag /}
Dans notre page HTML :

<p>Mon tag de rendu</p>
 #{mytag /}

Passage de paramètres

Si nous souhaitons passer des paramètres pour obtenir un rendu dynamique, dans le fichier de définition du tag, il suffit d’ajouter les balises de votre choix, préfixées d’un caractère _(souligné, ou underscore pour les anglophones) :

mon tag avec un paramètre : _parameter

L’appel à ce tag sera :

<p>Mon tag de rendu</p>
 #{mytag parameter :'premier paramètre' /}

Si nous souhaitons passer un objet en paramètre, par exemple un objet User, la définition du tag sera app/views/tags/userdetails.html :

<div class='userdetails'>
        <h1>Utilisateur</h1>
        <ul>
                <li><strong>nickname :</strong> _user.username</li>
                <li><strong>prénom :</strong> _user.firstname</li>
                <li><strong>nom :</strong> _user.lastname</li>
                <li><strong>mail :</strong> _user.email</li>
        </ul>
</div>

et l’appel à ce tag devient : (apps/views/Application/userdetails.html)

<p>Utilisateur connecté :</p>
#{userdetails user:connectedUser /}

où connectedUser est un objet de type User, représentant l’utilisateur connecté. Et ci-dessous découvrons le rendu obtenu :

^{figure 9.1.1 – Tag présentant les détails d’un utilisateur!}

Permalink | Leave a comment  »