Foursquare Kezako ?

Foursquare est une petite plateforme de réseau social ludique, microblogging basé sur la géolocalisation, disponible sur iPhone, Android, Blackberry,Windows phone, Ovi et Palm. Je suis désolé mais tu ne pourras rien faire sur ton 3310 ou ton Bi-Bop.

Garde le contact avec tes Bro’s

Qui dit réseau social, dit « Amis ». En même temps si tu n’as pas d’ami sur un réseau social tout comme Facebook ou Twitter, Ta vie virtuelle est merdique.

Une fois que tu as ajouté tes ami(e)s, les choses sérieuses commencent.

Lorsque tu débarques dans un nouveau lieu, tu presses le bouton « Check-in » qui enregistre ta position.
Dès ce moment, l’ensemble de tes amis connaissent en temps réel ta position.
Cette fonctionnalité est basée sur la Géolocalisation

Découvre de nouveaux lieux (microblogging)

A tout moment, il est possible de découvrir les lieux à proximité. (Restaurants, bars, grandes surfaces, magasins…)
Les membres à chaque check-in peuvent agrémenter les informations liées au lieu, en ajoutant des photos et des conseils.
Vous l’aurez compris, vous devenez le critique culinaire du restaurant dans lequel vous vous trouvez.

Foursquare et les autres utilisateurs comptent sur vous pour faire vivre l’espace communautaire, tout comme un guide du routard.

Le Challenge

Dans chaque lieu, vous découvrirez la personne qui détient le plus de check-in.
Il dispose du titre suprême de « Mayor ». Vous découvrirez les avantages qui lui sont réservés dans le point suivant. Ton objectif ? Le détrôner !

A chaque Check-in vous cumulez des points:
- Première visite dans un lieu
- Première visite dans un type de lieu
- Premier Check-in avec un ami dans le même lieu
- 2 semaines de suite dans le même lieu
…

Les badges

Toujours dans le but d’agrémenter cette compétitivité, des succès sont à débloquer.

(Tout comme les jeux vidéos sur le xBoxLive ou le PlaystationNetwork)
Exemple:
Super Mayor: Obtenir 10 titres de Mayor.
Overshare: Détenir 10 check-in de 10 lieux différents en moins de 12 heures
Superstar: 50ème lieu visité
…
Et en plus, tu continue de cumuler des points pour passer dans le classement du tableau d’affichage de tes amis.

Découvrir les bons plans

Certaines enseignes, bars, restaurants ont conclus des partenariats avec Foursquare, toujours dans l’optique d’attirer de nouveaux clients.

Vous pourrez ainsi débloquer les bons plans lors des différents check-in.
Présentez votre offre débloquée au vendeur sur votre smartphone et vous ne regretterez plus d’avoir souscris à Foursquare.
- 10% à chaque check-in sur vos achats en caisse
- Le café offert à chaque Check-in (notamment chez Flunch)
- Le premier demi offert lors de votre première visite
- Un shooter offert si c’est votre 5è check-in dans la même semaine
Et j’en passe et des meilleures.

Je pourrais vous expliquer Foursquare en long, en large et en travers, mais le meilleur moyen de l’adopter, c’est de le tester.
Vous deviendrez vite addict de cette petite application et ainsi garder vos titres de Mayor.

En attendant, filez sur https://foursquare.com/

Alors que Rovio vient de lancer Angry Birds pour Facebook, le studio a décidé de présenter en même temps son nouveau bébé, dont le lancement devrait arriver le 22 mars prochain, selon le site officiel. Préparez vous pour une nouvelle aventure haute en couleur.

Qu’est ce qu’il se passe dans l’espace ?

Pour ce nouvel opus de la saga Angry Birds, Rovio nous promets pas mal de nouveauté. Et ce n’est pas plus mal car les joueurs commençaient à frôler l’indigestion. En effet, depuis quelques années, on a droit qu’à de nouveaux plateaux avec différents thèmes, grâce à Angry Birds Season, et un Rio qui n’aura pas réellement convaincu les utilisateurs de Smartphones et Tablettes de part le monde. Quand on voit la folie que ce jeu avait lancé à son départ, il était temps de donner un bon coup de fouet à une licence un peu lassante.

Et c’est le pari que se lance le studio le plus prolifique sur mobile, en espérant dépasser le milliard de joueurs d’ici quelques mois. Pari qui me parait plus qu’ambitieux, mais avec Rovio et leur créativité, je ne serais pas étonné qu’ils y arrivent en peu de temps.

Angry Birds Space devrait nous proposer de nouveaux volatiles, avec, comme toujours, leur capacité propre à chacun, des terrains assez innovants et, le plus important de tout, une physique spatiale. Car oui, dans l’espace, les lois de la physique sont très différentes de celle de la terre. De quoi passer des heures à s’arracher les cheveux pour avoir les 3 étoiles dans chaque niveau.

Vers un accord Rovio/Facebook ?

De plus, avec leur intégration récente à Facebook, il y a fort à parier qu’ils vont essayer de linker votre Facebook à votre application iPhone, afin de partager et découvrir vos scores ainsi que ceux de vos amis en temps réel. Voir même de sauvegarder votre progression sur chaque plateforme afin de ne pas le recommencer de zéro partout.
Nous en saurons plus courant mars je pense, préparez vous à passer de nouvelles heures sur votre Smartphone ou votre tablette pour gagner la bataille des oiseaux contre les cochons verts !!

Bonjour à tous. Aujourd’hui, je vais vous présenter un plugin jQuery qui devrait vous plaire : Turn.js. C’est une petite libraire qui permet d’ajouter des transitions de changement de pages, similaires  à celles d’un livre ou d’un magazine. Vous avez peut être déjà vu ces « Effets FlipBook », souvent développés en Flash. Ici, on obtient le même rendu avec jQuery et HTML5. Beaucoup plus pratique du coup, surtout si on veut le mettre en place pour des plateformes mobiles, telles que les smartphones ou les tablettes.

Le changement de page s’effectue comme vous le feriez IRL, c’est-à-dire en déplaçant la page à partir de son coin, mais aussi d’un simple clic sur les coins ou même en utilisant les flèches de votre clavier. Je ne vois pas comment on pourrai encore plus faciliter la lecture en ligne, à moins de suivre la position de vos yeux avec Kinect. A réfléchir …

On peut relever que  les gros points forts de Turns.js sont :

• L’utilisation de l’accélération matérielle
• Facile à utiliser
• Léger (15k)
• Développé avec des technologies OpenWeb, donc intégrable partout et sur tous types de médias.

Si avec ça je ne vous ai pas convaincu de scanner tous vos livres et de les vendre sur LeBonCoin direct, je ne sais plus quoi faire.

Comment mettre en place Turn.js

Voici un petit exemple d’intégration, qui vous démontrera que son utilisation est on ne peut plus facile.

Bien sûr, penser à intégrer  turn.js et jQuery (version 1.7 minimum)

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="../../turn.min.js"></script>

Ensuite, la partie CSS qui défini la taille des pages et la couleur si la page tournée n’a pas de verso :

#magazine{

            width:1152px;

            height:752px;

}

#magazine .turn-page{

            width:576px;

            height:752px;

            background-color:#ccc;

            background-size:100% 100%;

}

La partie HTML, qui n’est qu’une définition de ce qui est affiché sur chaque page :

<div id='magazine'>

            <div style="background-image:url(pages/01.jpg);"></div>

            <div style="background-image:url(pages/02.jpg);"></div>

            <div style="background-image:url(pages/03.jpg);"></div>

            <div style="background-image:url(pages/04.jpg);"></div>

            <div style="background-image:url(pages/05.jpg);"></div>

            <div style="background-image:url(pages/06.jpg);"></div>

</div>

Ici, ce sont des fichiers images mais vous pouvez très bien y mettre du texte.

Puis l’instanciation de votre magazine :

$('#magazine').turn();

Et le tour est joué. Voici une petite démo du résultat, qui est assez frappant (Voir La Démo). Cette démo est faite à partir du projet turn.js sur GitHub.

Personnellement,  je trouve la dynamique incroyable, et surtout, le mouvement des pages affiche tellement bien l’image. Avec le souci du détail, le coin n’affiche pas une couleur grise au hasard mais bien l’image qu’il y a derrière. Une grosse concurrence aux solutions Flash équivalentes.

Bref, n’hésitez pas à aller sur le site officiel et à créer vos propres magazines ou livres.

Site Officiel

Je viens donc vous proposer quelques trucs et astuces qui pourront grandement vous servir durant vos dev, afin d’améliorer un peu vos connaissances. Malheureusement, pour la flemme, je n’ai aucune proposition à vous faire …

CheatSheets

Pour débuter, voici deux fichiers très utiles qui regroupent les principales propriétés de jQuery et jQuery CSS :

Télécharger jQuery 1.4 CheatSheet

Télécharger jQuery CSS CheatSheet

Document.ready

Pour charger vos méthodes au chargement de la page, vous avez surement l’habitude d’utiliser :

$(document).ready(function() {

// Votre code ici

}

Sachez que vous pouvez raccourcir cette déclaration en écrivant simplement :

$(function(){

// Votre code ici

});

Cela revient au même et vous permet de gagner un peu de temps.

Distinguer le clic droit du clic gauche

Si vous avez, comme expliqué précédemment, désactivé le clic droit sur votre page, et que vous désirez donner 2 actons différentes suivant le clic, comme par exemple pour un jeu, voici comment différencier le clic droit du clic gauche.

$("#element").live('click', function(e) {

if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {

alert("Left Button");

}

else if(e.button == 2)

alert("Right Button");

});

Rechercher une chaine de caractère

Avec jQuery, vous pouvez effectuer une recherche de chaîne de caractères dans votre page. Cela peut s’avérer très pratique.

var foundin = $('*:contains("some string bla bla")');

Rendre une balise <li> entièrement cliquable

Cela peut s’avérer très pratique lorsque l’on développe un menu avec des balises <ul> et <li>. Le lien ne se positionne que sur le texte et non sur tout l’onglet. Ca gêne énormément l’expérience utilisateur et surtout ça force à bien se positionner pour sélectionner son menu.

Il suffit de récupérer le lien lié à la balise <li> pour contourner ce petit problème :

HTML

<ul>

<li><a href="accueil">Accueil</a></li>

<li><a href="infos">A propos</a></li>

<li><a href="contact">Contact</a></li>

</ul>

jQuery

$("ul li").click(function(){

//Récupérer l'attribut href de l'élément a

window.location=$(this).find("a").attr("href");

return false;

});

Récupérer l’url courante

Si vous développez des méthodes générales, vous pouvez avoir besoin de récupérer l’url courante de la page, afin de gérer vos redirections en fonction d’où vous vous trouvez.

$(document).ready(function() {

var pathname = window.location.pathname;

});

Désactiver le clic droit

Si vous voulez créer vos propres menus contextuels, vous pouvez avoir besoin de désactiver le clic droit, afin de proposer votre méthode personnelle. Voici comment procéder avec jQuery :

$(document).bind("contextmenu",function(e){

//Mettez ici le code de votre propre menu

//Désactiver le menu par défaut

return false;

});

Vérifier si une checkbox est cochée

Il existe plusieurs méthodes pour vérifier si une ou plusieurs checkbox est/sont cochée/cochées, avec jQuery. Je vais vous les exposer ici :

1ere méthode :

$('#checkBox').attr('checked');

2e méthode :

$('#edit-checkbox-id').is(':checked');

3e méthode :

$("[:checkbox]:checked").each(

function() {

// Votre code ici

}

);

Valider une adresse mail :

Pour ne pas se retrouver avec des données erronées dans votre base et surtout avoir les bonnes informations sur vos users, voici comment valider une adresse mail dans un formulaire :

var email = 'user@test.com’

if(!(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email)))

alert('Adresse Mail non valide');

Valider une date de naissance

Deuxième point de validation pour les formulaires, les dates de naissance. Vous pouvez avoir besoin de vérifier si la personne est majeure ou à l’âge requis avant de valider une inscription par exemple. Bien que la personne puisse modifier l’année afin de se faire passer pour majeure, cela vous décharge de tout soucis éventuels.

$("#lda-form").submit(function(){

var day = $("#day").val();

var month = $("#month").val();

var year = $("#year").val();

var age = 18;

var mydate = new Date();

mydate.setFullYear(year, month-1, day);

var currdate = new Date();

currdate.setFullYear(currdate.getFullYear() - age);

if ((currdate - mydate) < 0){

alert("Sorry, only persons over the age of " + age + " may enter this site");

return false;

}

return true;

});

Switcher entre vos fichiers css

Vous proposez différents design ou versions de votre design sur votre site. Pour permettre facilement un switch entre les différentes feuilles de styles avec jQuery, voici la procédure à effectuer.

HTML

<link rel="stylesheet" href="default.css" type="text/css">

......

<a href="#" rel="defaut.css">Défaut</a>

<a href="#" rel="design1.css">Design 1</a>

<a href="#" rel="design2.css">Design 2</a>

jQuery

$("a.cssSwitcher").click(function() {

$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));

})

Récupérer l’IP d’un visiteur

Vous souhaitez espionner vos visiteurs ? ou tout simplement effectuer des validations par IP ? Il y a de nombreuses raisons pour vouloir connaitre l’IP d’un visiteur, pour vérifier s’il a déjà répondu à sondage par exemple. Pour la récupérer par jQuery, voici comment faire :

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){

alert( "Your ip: " + data.ip);

});

Récupérer les coordonnées de la souris

Cela peut être très utile dans des petits jeux, ou bien pour faire des statistiques. Enfin, voici comment récupérer les coordonnées de la souris sur votre page :

HTML

<span>Bouge la souris sur la div.</span>
   <span>   ; </span>
<div></div>

jQuery

$("div").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

Parser du XML avec jQuery

Bien souvent, on se sert d’un langage côté serveur pour parser ses fichiers XML, mais sachez que jQuery s’en charge très bien.

Fichier xml

<?xml version="1.0" ?>

<result>

<item>

<id>1</id>

<title>title1</title>

<description>desc1</description>

</item>

<item>

<id>2</id>

<title>title2</title>

<description>desc2</description>

</item>

<!-- ... -->

</result>

jQuery

$.get('file.xml',{},function(data){

$('item',data).each(function(){

var $this       = $(this);

var id             = $this.find('id').text();

var title         = $this.find('title').text();

var description = $this.find('description').text();

//do something ...

});

});

Ouvrir un lien dans un nouvel onglet / nouvelle fenêtre

L’attribut target n’étant pas valide en (X)HTML strict, il convient d’utiliser l’attribut rel enlieu et place, et de créer un attribut dynamiquement en jQuery.

$('a[rel=external]').attr('target','_blank');

<a href="http://www.jfpalmier.fr" rel="external">Ouvrir JFPalmier.fr dans un nouvel onglet</a>

Ajouter une ligne dans un élément <table>

Voici une petite astuce afin de rajouter dynamiquement, avec jQuery, une ligne dans un tableau :

$('#myTable tr:last').after('<tr>...</tr>');

Voila, la liste des snippets atteins malheureusement sa fin, mais rassurez vous, je compte vous en préparer d’autres pour un prochain article. J’espère en tout cas que cela pourra vous servir pour tous vos développements.

Comme ils le définissent, Silex vise à être :

• Concis : il exposse une API intuitive, concise et amusante
• Extensible : Silex dispose d’un système de vulgarisation autour des microservices de Pimple, qui le rends facilement liable à des librairies tierces
• Facile à tester : Silex, grace au HTTPKernel de Symfony2, rends les applications très faciles à tester

Comme vous pourrez le voir sur leur site, la documentation est très précise et complète. Cela vous permettra de prendre ce framework en main très rapidement.

Comment s’en servir :

L’installation de Silex est plutôt aisée : le Framework vous propose une archive à inclure, qui va par elle-même gérer tout le projet :

require_once __DIR__.'/silex.phar';

Ensuite, vous devez instancier la classe Silex() :

$app = new Silex\Application();

Vous devrez alors définir une route,  afin de matcher les requêtes GET, et retourner bonjour suivi du nom passé en paramètre :

$app->get('/hello/{name}', function($name) use ($app){

return 'Hello '.$app->escape($name);

});

Et enfin, lancer l’application :

$app->run();

Site Officiel de Silex

Toi qui lis cet article, oui toi, tu es certainement développeur mobile ou bien tu aspire à le devenir.  Ou bien tu es tombé dessus par hasard et si tu es encore là après un joyeux paragraphe, c’est que tu a de l’intérêt pour le développement mobile. Mais tu a surement envie de créer de superbes applications pour Smartphones, de caracoler en tête de l’AppStore et de tenir tête à AngryBirds ou Instagram ? Ou peut être tu désire juste réaliser une application mobile pour ton site, ton business, … Toujours est il qu’avant de se lancer tête baissée, il faut bien réfléchir à certains points très importants, que je vais te décrire ci-dessous.

Choisir sa plateforme

Le choix de la plateforme dépends énormément de ce que vous cherchez à développer et pour quels utilisateurs. Vous désirez créer un jeu, une appli pour la vendre et vous faire un petit bénéfice dessus, alors vous devrez surement développer pour iOS. Un public plus geek, alors peut être plus Android, un public professionnel et Blackberry sera surement le meilleur choix.

Mais peut être avez-vous besoin de travailler de près avec votre matériel, donc plus choisir un langage natif. Si par contre, vous cherchez à développer une application faisant appel à certaine API, ou aux données de votre serveur web, alors vous pourrez vous contenter de Sencha ou PhoneGap.

Un des points primordiaux est de bien choisir la voie la plus adaptée à nos besoins. Sachez qu’il n’y a pas de mauvaise réponse au choix de la plateforme, mais vous allez peut être perdre du temps ou ne pas toucher le bon public.

Vous n’allez pas devenir riche en développant une application

Ceci est bien sûr à prendre au sens large ; peut être qu’en ayant trouvé le concept génial, vous allez côtoyer les Angry Birds et compagnie, en tête de tous les classements d’applications. Mais pour une si belle réussite, combien n’ont jamais décollés. Et combien auraient mieux fait de proposer leur application gratuitement pour se faire un nom, avant de décliner sur une version payante et mieux fournie ?

Ce que je veux dire par là, c’est qu’il ne faut pas se dire « Je développe une application iPhone pour vivre tranquillement de ce revenu », vous risquez d’être vite déçu.

Lire les documentations propres à chaque plateforme

Chaque plateforme a ses propres spécifications et ses documentations, appelées HIG (Human Interface Guidelines), qui vous expliqueront comment faire en sorte que votre application colle au maximum avec les habitudes prises sur chaque OS. Comme par exemple avoir un bouton « Retour » en haut à gauche d’une application tournant sous iOS. Cela rend votre application plus instinctive et ne perturbe pas les habitudes de vos utilisateurs.

Ici encore, vous pouvez « révolutionner » les modes de navigation, il n’y a aucune règle qui vous en empêche, mais le plus simple est bien souvent de garder les bonnes pratiques, afin que la navigation ne soit pas difficile et ne gênent pas les utilisateurs.

Rendez vos applications amusantes

Et cela ne vaut pas que pour les jeux. Ce n’est pas parce que vous développez une application de gestion de planning qu’il faut qu’elle soit ennuyeuse. En rajoutant une petite dose de fun, cela rendra vos utilisateurs plus enclins à la choisir qu’une autre. Pensez à ce qui fait que vous-même, vous choisissez une application plutôt qu’une autre.

Et pour rejoindre le point précédent, vous pouvez très bien suivre les lignes directrices dans vos développements, sans bien sûr les respecter à la lettre et rajouter vos petits plus bien à vous qui feront de votre application celle qui faut posséder.

Révolutionnez les pratiques

Cela vient tout à fait à la suite de ce que j’ai pu vous expliquer. Vous allez peut être même dire que je me contredis, mais loin de là. N’essayez pas de changer toutes les habitudes des « Smartphones Users », mais ajouter une pratique nouvelle et innovante peut à elle seul vous permettre de vous démarquer.

Prenez par exemple, le fait de faire glisser la page pour rafraichir : Cela n’est pas une pratique native, elle a été introduite parTweetie2, puis a envahie la plupart des applications web. L’idée est pourtant simple, mais il fallait y penser. Et elle est rapidement rentrée dans les mœurs, a tel point que c’est presque la seule façon que l’on connait pour mettre à jour des informations.

Vite fait bien fait

A part pour les jeux, les utilisateurs cherchent une application qui fait bien son travail sans perdre de temps. Vous avez leur attention pendant 30 secondes, voir une minute. Alors pas de fioriture, fini les étapes complexes, vous devez proposer un résultat précis et concluant en peu de temps. Il vaut certaines fois mieux proposer un scénario par défaut qui soit assez concis, quitte à montrer qu’il existe des options facultatives, mais qui peuvent améliorer le résultat. Comme l’explique la pratique KISS : Keep It Simple Stupid.

Si bien sûr, votre application est plus dédiée à être utilisée tranquillement dans votre canapé, dans votre bain ou dans les toilettes (oui oui), moments où on a tout le temps du monde, alors bien sûr modifiez votre scénario. Mais sachez que la plupart du temps, bien que les pratiques tendent à changer, les gens utilisent leur Smartphones lorsqu’ils sont hors de chez eux, et bien souvent pressés ou pas spécialement à l’aise. Pour des besoins plus importants, ils choisiront leur ordinateur. Alors rapprochez vous au maximum des besoins et gardez tous le superflu en option.

En reprenant un peu ce qui se fait actuellement, le menu en bas de voter application mets en avant, en plein milieu, le point principal et qui déclenchera le scénario le plus rapide.

On a tous des doigts différents, mais les miens sont gros

Bon pas plus gros que ça, mais c’est juste pour vous exposer un des points les plus importants de cet article. Il est dit qu’en moyenne, un bouton ne doit pas être en dessous des 45*45 px. Si jamais vous dérogez à cette règle, vos utilisateurs risquent de ne pas pouvoir facilement cliquer dessus et gêner énormément leurs actions.

Je suis sûr qu’en plus, vous avez déjà rencontré ce souci. Et passer son temps à zoomer/dézoomer n’est  absolument pas une porte de sortie viable. Préférez donc une interface plus grosse mais épurée plutôt que petite et complète.

Différentes résolutions, une seule application

Une application pour les gouverner toutes, et dans les ténèbres le regretter. Car oui, vous allez sûrement développer une application pour plusieurs types de résolutions, ne serait ce que pour Smartphones et Tablettes. Et là, souvent, c’est le drame !

Pour être sûr que votre design se cale au mieux avec tous types de résolutions, préférez des images vectorielles. Le résultat sera plus propre et plus évolutif.

Créer un bel icône

Et oui, je n’invente rien. L’icône de votre application est la première chose que l’acheteur potentiel voit, avec son titre. Mais contrairement à des mots, cela va donner une vraie idée du style de votre application et façonnera sa première impression. Et un icône agréable poussera plus facilement l’acheteur à vouloir en savoir plus. Vous voudriez en savoir plus vous, sur une application dont l’icône ressemble à un assemblage de carré et de ronds fait sous Paint, avec des écritures en Comic Sans MS ? Non, et bien la plupart des gens réagit comme vous.

Il en va de même pour les images de présentation de votre appli, mise en place dans la description. Choisissez bien sûr celle qui en jettent le plus, n’hésitez pas à ajouter vos meilleures fonctionnalités. Votre but est que votre application soit téléchargée, il faut donc en mettre plein la vue, sans bien sûr tomber dans le cliché du vendeur chez Darty.

Tout doit être clair, et tout le temps

Il vous est surement déjà arrivé de tester un jeu, passer le tutoriel (ça nous embête tous) et en fait, vous retrouver comme une nouille parce que vous ne comprenez rien. Et Impossible de retrouver l’aide où le tutoriel, la solution serait de supprimer l’appli et de la réinstaller. Mais tant pis. On passe à autre chose. Voilà le scénario basique dans ce genre de situation.

Et oui, on fonctionne tous comme ça. Si jamais vous avez trop d’originalité, pensez à toujours proposer une aide à portée de doigt. Cela empêchera à vos utilisateurs de rater quelque chose parce qu’ils n’auront pas compris ce concept révolutionnaire. Et aussi de mettre une mauvaise évaluation sur le Store.

Méfiez vous des ressemblances

Veillez bien à ne pas avoir un design trop proche, voir identique aux applications disponibles nativement dans votre mobile. Non seulement parce qu’il est important de façonner l’identité de l’application, mais aussi car vous n’aurez jamais la même réactivité que celles-ci. Et c’est tout à fait normal, seulement l’utilisateur va en exiger autant, et cela pourrait grandement le décevoir.

Votre idée n’est pas originale

Vous pourriez penser que si, et bien non !! Bon okay, je vais arrêter d’être aussi pessimiste, mais si vous avez eu cette idée, c’est qu’elle a été façonnée par l’utilisation de d’autres applications, sites web, jeux, …, ou un besoin que vous avez qui pourrait ainsi être pallié. Mais vous n’êtes certainement pas le seul dans ce cas.

Bien que l’originalité soit une chose très importante si on veut réellement se démarquer des autres,  il ne faut pas pour autant négliger le design, l’ergonomie et bien sûr, le facteur chance.

Développé par vous-même, pour vous-même ?

C’est une bonne chose, déjà vous aurez un utilisateur satisfait. En espérant que ça colle à vos attentes. Sinon vous avez tout faux.

On ne développe rarement des applications que pour soi même, donc essayez de penser un peu plus large que vos seuls besoins afin de toucher un maximum de personnes avec votre application.

Ecoutez vos utilisateurs

C’est important d’écouter ce que les gens disent de votre application. Cela peut aller du report de bug à des fonctionnalités auxquelles vous n’auriez pas pensé.

Sachez qu’il est très important de relever les feedbacks que vos utilisateurs peuvent faire de votre appli, en bon ou en mauvais. Car c’est ainsi que vos évolutions colleront au mieux aux besoins et que vos communauté d’utilisateurs grandira. Et un client satisfait est bien meilleur pour votre réputation qu’un client insatisfait.

Faites Beta Tester votre application

C’est important, car vous, en tant que développeur, vous savez très bien comment on s’en sert. Vous savez même comment arriver au dernier niveau et battre le monstre en 3 secondes. Mais qui prouve que c’est aussi clair pour tout le monde ?

Alors n’hésitez pas à la faire tester à vos amis, famille, … Vous pouvez même proposer à des gens une beta test, comme surTwitter ou sur des blogs spécialisés. Ainsi, les utilisateurs seront des personnes qui s’y connaissent et qui vous feront un retour très complet. Et si les gens ont aimé et qu’ils ont de l’influence, ça vous fera rapidement une très bonne publicité.

J’espère que cet article vous a plu et peut être répondu à certaines questions que vous vous posiez. Il faut toujours poser les bases très clairement avant de développer, que ce soit un logiciel, un site web ou une application. Je ne pense pas avoir été exhaustif mais ce sont pour moi des bases très importantes à respecter à sur lesquels se pencher.

Naruto Shippuden : Ultimate Ninja Storm Generations / PS3-360

Prévu pour le 30 mars 2012, Naruto et toute sa bande vont faire une nouvelle apparition sur vos consoles cette année. Avec un système de combat revu, l’ajout d’anciens personnages comme des plus récents, il devrait nous apporter encore plus de plaisir que ses prédécesseurs. Namco Bandai à aussi ajouté de nouveaux combos, de meilleures esquives, permettant de se placer dans le dos de son adversaire plus rapidement, …

Avec plus de 16 minutes de cinématiques, vous devriez vous retrouver au plus proche de l’anime pour un jeu toujours plus immersif dans l’univers Naruto.

Final Fantasy XIII-2 / PS3-360

Après Final Fantasy XII qui aura énormément déçu une bonne partie des joueurs, on ne s’attendait pas à ce que Square Enix nous propose une suite directe à cet épisode. Et pourtant … ils auraient retenus les leçons de leurs erreurs  et décidé de redorer le blason de sa série mythique. Personnellement, j’attends toujours un épisode qui égalerais le mythique Final Fantasy VII.

Ce 2ème épisode prolonge directement l’histoire entamée dans Final Fantasy XIII – 1, en ajoutant de nombreuses nouveautés, un rythme de jeu plus soutenu et maîtrisé, ainsi que des phases d’exploration à l’image des anciens FF. En reprenant un système de combat des plus efficaces et un talent cinématographique sans pareil, ce nouvel opus devrait ravir tous les fans de la série et regagner leur coeur.

Dishonored / PC-PS3-360

Quand le studio lyonnais, qui a déjà développé les mythiques Arx Fatalis et Drak Messaih of Might & Magic, rencontre l’ancien directeur artistique de Half-Life 2 et Deus Ex, cela donne un jeu d’aventure assez sombre, mélangeant RPG et infiltration.

Dishonored nous emmène donc dans un univers plutôt étrange, dans laquelle le joueur va incarner Corvo, un jeune homme possédant des pouvoirs surnaturels, qui s’est retrouvé incarcéré. Accusé à tort, il n’aura de cesse de chercher à prouver son innocence. Il faudra donc mêler infiltration pour fuir sans se faire remarquer, tout en utilisant les bons pouvoirs au bon moment, qui peuvent être des nuées de rats, des ondes de choc ou même le contrôle du temps. Et il existe encore nombre de possibilités que vous découvrirez dans ce jeu.

C’est vraiment un des principaux jeux à suivre en 2012.

SoulCalibur V / PS3-360

Dix sept ans avec la destruction de Soul Edge, Siegfried s’est libéré de l’emprise de l’épée maudite mais semble toujours aussi motivé. Le décor est planté !

Bien que les graphismes n’aient pas spécialement changé, tout en restant très agréable, c’est un gameplay très proche de ses origines qui ravira les fans de la série. Et le casting a de quoi plaire aussi : A une galerie de personnages variés vient s’ajouter Ezio, d’Assassin’s Creed. Et par rapport aux joueurs Star Wars qui étaient un peu imba, Namco a promis d’équilibrer au mieux possible l’assassin italien, afin de le rendre jouable en tournoi.

Prévu pour février, ce jeu devrait ravir les fans de « jeux de baston ».

Starcraft II : Heart of the Swarm / PC-Mac

La deuxième partie de la trilogie Starcraft répondra au nom d’Heart Of Swarm, que l’on peut traduire par  « Au Cœur de l’Essaim ». Avec ce titre, tout est dit, le jeu sera basé sur la race Zerg. La campagne sera plus orientée micro, avec la gestion d’un héros à la Warcraft 3, qui sera la douce et tendre Kerrigan.

Pour ceux qui ont déjà joué au premier opus et qui maitrisent la race Zerg, les débuts de la campagne vous paraitront surement assez simple, mais ne vous inquiétez pas,  la difficulté augmente au fur et à mesures et tous les objectifs secondaires devraient vous tenir en haleine.

Pour ce qui est du multi-joueurs, qui est une des plus importante au monde actuellement, rien n’a spécialement été dévoilé, à part une vidéo présentant les nouvelles unités de chaque race. Attendez-vous donc à devoir acheter ce second épisode, sous peine de vous retrouver seuls sur un ladder déserté par tous les PGM du jeu de statégie de Blizzard.

The Last Guardian / PS3

Après les sublimes Ico et Shadow of the Colossus, préparez vous à rêver avec The Last Guardian. Il met en place un duo composé d’un petit garçon et d’une créature nommée Trico. Bien que peu d’éléments aient été dévoilés à l’heure actuelle, on sais que la relation entre les 2 personnage sera très importante.

Il reste tout de même un des titres les plus attendus de l’année, surtout s’il est du même acabit que  ses prédécesseurs.

Mass Effect 3 / PC-PS3-360

Le 3^e  et dernier volet de la série Mass Effect devrait voir le jour cette année. Et les fans l’attendent cette fin. Comment cet épisode va-t-il se déroulé, suite aux décisions prises dans Mass Effect 2 ? Vont-ils influer directement sur l’issue de la guerre contre les Moissonneurs ? Tout ce que l’on peut dire, c’est que cet affrontement sera destructeur.

Préparez vous pour la fin de cette trilogie de Bioware, la conclusion sera prochainement sur vos écrans.

Darksiders II / PC-PS3-360-Wii U

Alors qu’il n’était pas attendu, le premier volet Darksiders a montré qu’il pouvait rivaliser avec les plus gros titres de la catégorie. Et le second opus devrait être de la même trempe. Ce coup ci, le personnage de Mort sera le héros principal, bien décidé à tirer les choses au clair, suite aux accusations portées conter son frangin. A savoir que l’histoire se déroule en même temps que l’épisode précédent.

Voilà, j’ai fini de vous mettre l’eau à la bouche avec cette première partie. Préparez vous pour la seconde, car il reste encore du lourd, du très lourd !!

Mettez en place votre présentation en HTML, donnez y du style avec CSS, et donnez de la vie à tout ce petit mélange grâce à jQuery. Et tout ça se réalise facilement et en douceur avec ce plugin.

Plus puissant encore que Powerpoint de Microsoft, préparez vous à réaliser les meilleurs présentations en ligne :

• Gestion des touches, avec un défilement réalisé grâce au flèches de votre clavier
• Possibilité d’ajouter des sons ou des vidéos
• Ajout de formulaires, de boutons cliquable, …
• Animez votre slideshow, et chronométrez le avec précision

Bref, c’est la meilleure alternative à tout ce qui se fait sur des logiciels de bureautique.

Pour s’en servir, rien de plus simple :

Divisez vos slides en div, dans votre partie HTML :

<div id="presentation">

  <div class="slide">
    <h1>My Presentation</h1>
  </div>

  <div class="slide">
    <h2>My Dot Points</h2>
    <ul>
      <li>First dot point</li>
      <li>Second dot point</li>
      <li>Third dot point</li>
    </ul>
  </div>

</div>

Il suffit ensuite d’initialiser votre slideshow en Javascript et de le configurer :

// When using the jQuery plugin:
$('#presentation').fathom({
  dislayMode: 'single',
  slideTagName: 'section'
});

// When instantiating the class:
var fathom = new Fathom('#presentation', {
  onActivateSlide: function() {
    console.log(this);
  }
});

// Or, you can modify the global defaults:
Fathom.setDefaults({
  displayMode: 'multi',
  margin: 200
});

N’hésitez pas à visiter le site officiel pour en savoir plus.

Un client P2P/BitTorrent qui nous permettra de résister encore et toujours et de pirater les artistes sans aucun scrupules. Je précise tout de même que c’est très mal de télécharger illégalement, qu’il faut respecter le travail des artistes et donner toujours plus d’argent aux majors s’il vous plait.
Ce sont donc des chercheurs aux Pays Bas qui ont mis en place un réseau BitTorrent Full P2P, qui empêche toute possibilité de le bloquer, à moins de casser l’Internet tout entier comme disent certains. Pourtant, Tribler n’est pas nouveau ; cela fait 5 ans que les créateurs travaillent dessus et n’ont cesse d’améliorer cette technologie. Mais ce sont surtout les dernières fonctionnalités ajoutées qui en font un outil très puissant, lui permettant de tourner même si les serveurs sont coupés.

Car sa puissance justement vient de là. Lorsque vous faites une recherche dans Tribler, elle s’effectue sur tous les utilisateurs de tribler, permettant de continuer même si un tracker est coupé.

Attendez, c’est pas fini !!

Mais là, je vous entends déjà me dire « Bon bah je vais relancer la mule quoi« . Mais non ! Avec Tribler, on utilise les avantages d’un client BitTorrent, du P2P … et d’un réseau social indéniable. Car si on recherche nos torrents sur des plateformes telles The Pirate Bay, pour ne citer que celle ci, c’est pour être sûr de la qualité du fichier que l’on télécharge. Et bien Tribler propose encore mieux. Un petit bouton j’aime à côté du fichier, permettant de valider si le fichier corresponds bien au titre, à sa description. Et c’est aussi cela qui pêchait sur le P2P à l’ancienne, où l’on tombait sur 100% de fake quand on voulais télécharger le dernier blockbuster pas encore sorti au ciné. Vous pourrez aussi modifier toutes les données liées au fichier, afin d’affiner sa description ou de préciser la date de sortie du film, par exemple.

Et le must du must, il permet une lecture des fichiers en streaming. Vous pourrez donc vérifier la véracité de votre film avant de le télécharger, ou bien même le regarder directement via Tribler. De quoi remplacer Megavideo …

Avec en plus un interface agréable et ergonomique, je me demande bien pourquoi vous êtes encore en train de lire cet article au lieu de filer télécharger ce client BitTorrent. Surtout que plus il y aura de personnes à partager, et plus il y aura de choix.

Je ne vous retiens pas plus longtemps, et je vous propose même le lien vers le site officiel de Tribler.

Seulement disponible aux Etats Unis pour l’instant, Le Kindle Fire remporte un succès mérité dans le monde impitoyable des tablettes tactiles. Il se dirait qu’elle se serait déjà écoulée à plus de 6 millions d’exemplaires en 2 mois et demi d’existence. Une étude de la société Flury rapporterait même qu’elle serait la plus populaire actuellement avec 36% des activités des tablettes Android. Rappelons que le Kindle Fire est sorti le 15 novembre aux USA, et qu’on attend toujours qu’il fasse son apparition en Europe.

Les caractéristiques du Kindle Fire

Avec des mensurations de 190 x 120 x 11,4 mm et un poids de 413g, le Kindle Fire est un peu plus petit que ses concurrents. Mais son prix n’a rien à voir : 199$ !! De 200 à 300$ de moins que les autres tablettes du marché, ça fait réfléchir.

Il fonctionne sous GinderBread, mais avec une interface entièrement revisitée par Amazon, qui la rends extrêmement complète et très user-friendly. De quoi réconcilier certains « non-geeks » qui peuvent trouver Android difficile à prendre en main de prime abord.

Et cette interface vous propose tout ce qu’Amazon vous propose a présent, c’est à dire des millions de livres, de magazines, de musiques, de vidéos et d’applications. C’est cela qui lui donne toute sa force et peut concurrencer l’iPad et iTunes. De plus, dès réception de votre Kindle Fire, celui est directement configuré avec votre compte Amazon et rempli de tous les achats que vous avez passé précédemment sur cette plateforme. C’est pas merveilleux tout ça ?

Côté matériel, le Kindle Fire possède un écran de 7 pouces au format 16/9, utilisant la technologie IPS (In Plane Switching), la même que celui de l’iPad, pour un résultat très convaincant au niveau des couleurs et très efficaces contres les rayures. Equipé d’un processeur Omap 4430, Amazon a fait le choix pour sa tablette de tout miser sur de très bonnes capacités pour la vidéo HD.

On pourra par contre noter qu’il ne possède pas de caméra, pas de sortie HDMI, ni de connecteur MicroSD. Un mauvais point de ce côté, surtout qu’avec 8Go de stockage (6,5 une fois le système installé), il ne sera pas possible d’y copier beaucoup de vidéos HD. Pour pallier à ce petit manque, Amazon propose le cloud storage, en offrant les 5 premiers gigaoctects à tout détenteur d’un compte Amazon. Il faut aussi savoir que tout contenu acheté directement sur Amazon est lui aussi stockée dans le cloud, et donc accessible à la demande. Côté autonomie, comptez 8 heures en lecture d’ebook et 7h30 en visionnage vidéo … si on n’active pas le wifi bien sûr.

Et pour ce qui est des applications ?

De ce côté ci, le Kindle Fire est plutôt bien équipé et n’a rien à envier à l’AppStore d’Apple. Tous les classiques sont en vente sur l’App Store d’Amazon, tels qu’ Angry Birds, Cut The Rope, Plant VS Zombie, etc, que j’ai pu vous présenter dans un précédent article. Sans compter bien sûr sur tous les livres, musiques et vidéos que propose déjà Amazon.

Pour conclure sur le Kindle Fire

Nous avons donc pu voir que le Kindle Fire est une tablette de qualité, très intéressante pour tout ce qui est loisirs numériques, et en conservant les qualités qui ont fait la réputation de ses Kindle originels. Elle n’est peut être pas concue comme un concurrent direct à l’iPad ou la Galaxy Tab, mais elle est tout de même un produit très intéressant d’un point de vue qualité prix. Personnellement, je possède déjà un Kindle, que je trouve très pratique pour lire et surtout, peu encombrant et très autonome. Ce qui me rends impatient de pouvoir tester le Kindle Fire et peut être même en acquérir un. Reste plus qu’à attendre son arrivée sur le marché Européen.

Et vous, que pensez vous de cette tablette ? Pensez vous l’acheter ou plutôt rester sur les classiques ? 

Avec OSE, il est possible de voir les différents types de liens :

• Les backlinks en provenance de sites externes
• Les backlinks internes à votre site
• Les liens nofollow qui pointent sur votre site
• Les liens en provenance d’un 301

Très intéressant pour suivre l’évolution de votre référencement naturel.
Vous pourrez même exporter ces résultats au format CSV pour les stocker et les réutiliser plus tard.

Cependant, il faut savoir que la version gratuite peut s’avérer limitée si vous avez des besoins assez importants, mais tout à fait suffisant pour un petit blog personnel.

Site Officiel

Il vous permettra de créer votre propre loader personnalisé, suivant certains paramètres :

• Sa couleur
• Son diamètre
• Sa densité
• Son FPS (Frame Per Second / Images Par Seconde)
• Sa forme
• etc

Vous pourrez ensuite récupérer le code à insérer dans votre application pour l’utiliser.

Ils vous proposent aussi de récupérer directement la librairie CanvasLoader UI, afin de les créer directement, de votre propre chef.

Bien sûr, il faut un navigateur interprétant HTML5 et CSS3 pour l’afficher, sinon, optez pour un loader à l’ancienne.

Si vous voulez créer votre loader, c’est par ici.

Je vais aujourd’hui vous présenter une petite application iPhone qui va vous permettre de réaliser des montages vidéos de qualité, avec musiques, titre et tout le tatouin. Et ceci pour la modique somme de rien du tout. Elle pas belle la vie ?

Développé sur la Silicon Wadi

Magisto, c’est une équipe de douze personnes, fondée par Oren Boiman et Alex Rav-Acha. Ces deux docteurs en montage vidéo ont fondé leur société sur la Silicon Wadi, équivalent Israélien de la Silicon Valley Californienne.

Ils ont récemment eu une levée de fond de 5,5 millions de dollars, ce qui n’est pas rien, auprès de la 10e fortune mondiale : Li Ka-Shing. De quoi leur permettre de s’agrandir et s’améliorer, tout en profiter des portes qui s’ouvrent grace aux contacts de cet investisseur. Ils vont surement chercher à s’intégrer à d’autres projets prochainement.

En quoi consiste Magisto

Magisto est donc une application gratuite de montage vidéo automatisé.

Elle va analyser votre vidéo, analyser le contenu (visage, décor, …) ainsi que la manière dont ç’a été filmé, afin d’en extraire les moments captivants. Après avoir passé tout ça à la moulinette, Magisto vous proposera un résumé, pour lequel vous pourrez ajouter titre et bande son, ainsi que des effets spéciaux, des transitions, régler la luminosité, … . Notez qu’il intègre aussi un stabilisateur d’image, pour retoucher les séquences mal filmée.

Points fort de Magisto :

• Ne requiert aucune compétence particulière
• Prends en charge plusieurs vidéos, vous n’avez juste qu’à lui spécifier l’ordre dans lequel vous voulez qu’il l’analyse
• Le système de reconnaissance est très rapide
• Vous pouvez utiliser les vidéos et les musiques de votre iPhone, ce qui est plus pratique que de chercher partout
• Un système de partage social est intégré, avec la prise en charge de Facebook, Twitter, Youtube,…

Vous êtes désormais prêts à spammer vos amis et famille de toutes les vidéos possibles et imaginables que vous ferez tout au long de vos journées.

Pour télécharger gratuitement votre application, c’est par ici ! 

Pour voir des exemples de vidéos, c’est par là !

Découvrez toutes les musiques grace à Shazam

Je suis sûr qu’il vous est souvent arrivé de regarder un film, une série, et de vous dire « Elle est bien cette musique ». Mais avant Shazam, on allait sur notre moteur de recherche préféré, on écrivait les paroles ou ce qu’on en avait compris, et on cherchait des heures. Avec Shazam, il suffit de sortir son mobile, d’appuyer sur le bouton central de l’application et d’attendre que le moteur de Shazam s’occupe du reste. Il vous sors le titre, l’artiste, le nom de l’album et vous propose de télécharger le titre sur iTunes. Vous pourrez même réserver votre place pour leur prochain concert. C’est dire si l’application est complète.

Mais quelle est donc cette technologie qu’utilise Shazam ?

Shazam utilise une technologie de reconnaissance d’empreintes digitale appartenant à Landmark Digital Services, qu’il lie à une base de données de plus de 10 millions d’empreintes digitales de titres musicaux. Donc lorsque l’utilisateur tag son échantillon musical, Shazam l’interprète, la compare à sa base et ressort soit les informations du titre, soit un message d’erreur s’il ne l’a pas trouvé.

Pour entrer un peu plus dans le détail technique, un morceau de musique peut être représenté comme un graphique temps / fréquence, communément appelé spectrogramme. Chaque point de ce graphique représente l’intensité d’une fréquence à un moment précis. Chaque musique possède son propre spectrogramme, ce qui permet à Shazam de comparer les pics d’intensité de la musique enregistrée avec toutes celles contenues dans la base.

Et Shazam Player dans tout ça ?

Shazam Player est la nouvelle version de Shazam. Outre une interface entièrement revisitée et beaucoup plus ergonomique, cela apport de nombreuses options très intéressantes comme :

• L’affichage des paroles
• La biographie des artistes
• Des informations plus complètes sur les concerts
• Partager la musique sur les réseaux sociaux, tels Facebook ou Twitter
• etc

Mais bien sûr, la principale fonctionnalité est le fait de pouvoir lire les musiques, d’où son nom de Player. Une amélioration de taille qui s’ajoute à l’existant, c’est à dire la reconnaissance musicale.

Malheureusement, cette application n’est pour l’instant disponible qu’aux USA, mais son arrivée en Europe devrait se faire bientôt.

Comment fonctionne théoriquement ce système d’upload de fichier en HTML5 ?

Il faut savoir qu’un upload de fichiers en HTML5 combine 3 différentes technologies :

• L’API File Reader, API Javascript qui va implémenter HTML5 et lui permettre de lire différents fichiers
• L’API Drag&Drop, permettant de glisser/déposer des éléments au sein de la page ou bien en provenance de l’extérieur
• La technologie AJAX, afin de gérer l’upload, la barre de progression, l’apercu sans avoir à recharger votre page en PHP pur, et le tout en multitask.

Prenez bien en compte que ce système ne fonctionne que sur les derniers navigateurs, qui interprètent HTML5 et prennent en compte les API Drag&Drop et FileReader. Il suffira de récupérer en Javascript la version du navigateur afin de déterminer si l’on affiche un formulaire standard d’upload ou si l’on peut afficher celui-ci. Maintenant que tout est mis en place, passons au développement.

Partie HTML

La partie HTML est plutôt simple. Vous devez définir un document HTML5, y inclure le fichier styles.css et vos fichiers javascript, en l’occurrence la librairie jQuery, le plugin jquery.filedrop.js et votre fichier script.js.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <title>Un système d'upload d'images en HTML5</title>

	<!-- Including The CSS File -->
    <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

	<!-- Including The jQuery Library -->
	<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

	<!-- Including the HTML5 Uploader plugin -->
	<script src="assets/js/jquery.filedrop.js"></script>

	<!-- The main script file -->
	<script src="assets/js/script.js"></script>

</head>

<body>

<div id="wrapper">

    	<h1><u>MyUploadSystem</u></h1>

		<div id="dropbox">

		   <span class="message">Déposez votre/vos fichier(s) image(s) ici. <br /></span>

		</div> <!-- end content -->

</div> <!-- end wrapper -->
</body>
</html>

Il suffira d’une seule div pour intéragir avec FileDrop, qui sera dans l’exemple #dropbox. La balise <span>est là pour afficher un message d’erreur si le cas se présente. Il faudra aussi une div afin d’afficher l’apercu de l’image uploadée et la barre de progression :

<div class="preview done">

	<span class="imageHolder">
		<img src="" />
		<span class="uploaded"></span>
	</span>

	<div class="progressHolder">
		<div class="progress"></div>
	</div>

</div>

La partie HTML gérée, passons au fichier script.js.

Partie Javascript

Tout d’abord, il faudra créer une fonction qui récupérera l’objet fichier et permettre un apercu dans notre page HTML. On va donc récupérer l’image par son url sur le PC de l’utilisateur, la lire et l’afficher dans notre balise img. Comme on travaille côté client, la lecture d’un fichier sur le pc client est plus économique niveau ressources, que de gérer l’upload et de l’afficher après.

var apercu = '<div class="preview">'+ '<span class="imageHolder">'+ '<img />'+ '<span class="uploaded"></span>'+ '</span>' + '<div class="progressHolder">' + '<div class="progress"></div>'+ '</div>'+ '</div>'; 

	function createImage(file){

		var preview = $(template),
			image = $('img', preview);

		var reader = new FileReader();

		image.width = 100;
		image.height = 100;

		reader.onload = function(e){

			// e.target.result va récupérer
			// can be used as a source of the image:

			image.attr('src',e.target.result);
		};

		// Reading the file as a DataURL. When finished,
		// this will trigger the onload function above:
		reader.readAsDataURL(file);

		message.hide();
		preview.appendTo(dropbox);

		// Associating a preview container
		// with the file, using jQuery's $.data():

		$.data(file,preview);
	}

Nous allons ensuite nous occuper de la partie FileDrop. Avec le bout de code suivant, chaque fichier droppé dans la div #dropbox qui sera un fichier image sera uploadé, en appelant post_file.php.

$(function(){

var dropbox = $('#dropbox'),
message = $('.message', dropbox);

dropbox.filedrop({
// The name of the $_FILES entry:
paramname:'pic',

maxfiles: 5,
maxfilesize: 2, // in mb
url: 'post_file.php',

uploadFinished:function(i,file,response){
$.data(file).addClass('done');
// response is the JSON object that post_file.php returns
},

error: function(err, file) {
switch(err) {
case 'BrowserNotSupported':
showMessage('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 5 at most!');
break;
case 'FileTooLarge':
alert(file.name+' is too large! Please upload files up to 2mb.');
break;
default:
break;
}
},

// Called before each upload is started
beforeEach: function(file){
if(!file.type.match(/^image\//)){
alert('Only images are allowed!');

// Returning false will cause the
// file to be rejected
return false;
}
},

uploadStarted:function(i, file, len){
createImage(file);
},

progressUpdated: function(i, file, progress) {
$.data(file).find('.progress').width(progress);
}

});

var template = '...'; 

function createImage(file){
// ... see above ...
}

function showMessage(msg){
message.html(msg);
}

});

La partie PHP

La partie PHP sera très basique, il n’y a pas vraiment de différence ici entre un upload via un formulaire basique et notre upload via Drag&Drop en HTML5. Notez surtout que l’avantage de ce système d’upload en AJAX permet de télécharger les fichiers simultanément, ce qui offre aussi un gain de temps considérable lors d’upload de fichier multiple.

$upload_dir = 'uploads/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error! Wrong HTTP method!');
}

if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Only '.implode(',',$allowed_ext).' files are allowed!');
	}	

	//Deplace le fichier dans le dossier Uploads

	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File was uploaded successfuly!');
	}

}

exit_status('Something went wrong with your upload!');

function exit_status($str){
	echo json_encode(array('status'=>$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}

  Ce script s’occupe aussi de vérifier les extensions de fichiers, afin de n’uploader que des images. Désormais, votre système d’upload HTML5 d’images est fonctionnel. Mais moche. On va donc rajouter un peu de CSS pour rendre ça plus agréable.

La partie CSS

Pour ce qui est du CSS, c’est assez basique, je ne pense pas avoir trop de chose à vous expliquer à ce niveau là.  

body {
	background: #eee url(../img/bg.png) repeat;
	color: #333333;
	font: 14px/24px Georgia, 'Times New Roman', Times, serif;
}

h1 {
margin-top:75px;
font-size: 42px;
text-align: center;
}

/* Content */
#content {
	background: url(../img/content_bg.png) repeat;
	border: 1px solid #ccc;
	border-left: none; border-right: none;
	float: left;
	width: 940px;
	padding: 40px 10px 0 10px;
}

	/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox{
	background: url(../img/content_bg.png) repeat;

	border-radius:3px;
	position: relative;
	margin:80px auto 90px;
	min-height: 290px;
	overflow: hidden;
	padding-bottom: 40px;
    width: 690px;

	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

#dropbox .message{
	font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
	color:#ccc;
	font-size:10px;
}

#dropbox:before{
	border-radius:3px 3px 0 0;
}

/*-------------------------
	Image Previews
--------------------------*/

#dropbox .preview{
	width:245px;
	height: 215px;
	float:left;
	margin: 55px 0 0 60px;
	position: relative;
	text-align: center;
}

#dropbox .preview img{
	max-width: 240px;
	max-height:180px;
	border:3px solid #fff;
	display: block;

	box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
	display: inline-block;
	position:relative;
}

#dropbox .uploaded{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url('../img/check.png') no-repeat center center rgba(255,255,255,0.5);
	display: none;
}

#dropbox .preview.done .uploaded{
	display: block;
}

/*-------------------------
	Progress Bars
--------------------------*/

#dropbox .progressHolder{
	position: absolute;
	background-color:#A23f38;
	height:12px;
	width:100%;
	left:0;
	bottom: 0;

	box-shadow:0 0 2px #000;
}

#dropbox .progress{
	background-color:#2586d0;
	position: absolute;
	height:100%;
	left:0;
	width:0;

	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#dropbox .preview.done .progress{
	width:100% !important;
}

Et voilà, c’est fini

Ca y est, vous le tuto est terminé. Vous avez pu comprendre comment fonctionne ce système d’upload de fichiers images, le Drag&Drop et le FileReader. Libre à vous de l’améliorer, afin de permettre d’uploader d’autres fichiers que des images, ou même tous types de fichiers. Pourquoi ne pas, aussi, ajouter une galerie photo afin de mettre en forme toutes les images qui ont été uploadées. Vous pouvez donc voir que les utilisations de ce systèmes sont diverses et variées.

Comme je vous l’ai proposé en début d’article, vous pouvez voir une démo de ce tuto et aussi télécharger le code complet.

Cet article est adapté d’après une idée originale de Martin Angelov.

Twitter, pour ceux qui ne le connaissent pas encore, est l’un des réseaux sociaux les plus utilisés au monde. Limité à 140 caractères par tweet, ce site de microblogging permet non seulement de s’exprimer, mais aussi se tenir au courant de tout ce qui se passe dans le monde à n’importe quel moment. Créé en 2006, Twitter a connu une popularité grandissante pour bientôt atteindre les 500 millions d’utilisateurs.

Un client Twitter, pourquoi faire ?

Bien que la version web soit très bien gérée, il faut avouer que l’on se trouve vite limité si l’on veut l’utiliser à 100%.  Cela permet, entre autre, d’être averti lorsque qu’on reçoit un message privé, une notification, ou même gérer plusieurs comptes très facilement. Les plus simple vous permettront juste de suivre plusieurs onglets à la fois, les plus puissants offrent des options de filtrage, de recherche, de veille, d’obtenir des stats.

Si je ne vous ai pas encore convaincu (ce qui serait fort possible, je suis pas le meilleur en persuasion), vous allez surement le devenir en lisant la description des différents clients que je vous propose. Bien sûr, la plupart satisferont très bien vos besoins, et je ne peux dire si l’un est mieux que l’autre.  Ca dépendra surtout de savoir sur lequel vous êtes le plus à l’aise.

TweetDeck (multiplateforme/gratuit)

C’est le client Twitter que j’utilise personnellement. Basé sur Adobe Air, il vous permettra de gérer au mieux votre/ compte(s) Twitter. Avec une interface multicolonnes modulable, vous pourrez connecter plusieurs comptes, suivre toutes vos notifications, messages perso, différentes conversations ou hashtags, … bref, il vous dira tout ce que vous voulez savoir. Vous pourrez aussi directement y ajouter vos photos et sachez qu’il raccourci automatiquement les URLs. Après son rachat par Twitter, on pourrait presque le considérer comme le client officiel.

Bref, que demander de plus ?

Lien de téléchargement

HootSuite (multiplateforme/Gratuit-Payant)

Jusqu’à 5 comptes en version gratuite, illimité en version payante, ce client Twitter prends de plus en plus de part de marché. Léger, rapide, efficace, il est de plus très complet et offre à peu près les même prossibilités que TweetDeck. Mais en plus, il vous permettra de lier vos comptes Facebook, Linkedin, Gmail, Youtube, … de quoi tout lier en en seul endroit, pour vous faire gagner un maximum de temps.

Lien de téléchargement

Plume (Android/Gratuit)

Ici, on va parler d’un client Twitter pour Android. Et c’est une appli spécialisée dans le monde de Twitter, donc très précise et très puissante. Très customisable, ce qui est un gros plus sur son smartphone, il vous permettra de suivre au mieux toutes vos infos très facilement. Permet une gestion du multicompte, raccourcissement d’url et l’ajout de photos par exemple, ne cherchez plus si vous êtes possesseur d’un téléphone ou d’une tablette tournant sous Android.

Lien de téléchargement

Twitteriffic (iPhone/gratuit-payant)

Bien que la toute dernière version de l’application Twitter sur iPhone soit très puissante, il faut tout de même s’intéresser de près à Twitteriffic. C’est une des premières applications iPhone gérant vos comptes Twitter, c’est un peu l’équivalent de Plume, mais pour votre iOS. Bien qu’existant en version payante, la version gratuite est tout à fait suffisante.

Lien de téléchargement

Seesmic (multiplateforme/gratuit)

Un des derniers ogres des clients pour réseaux sociaux à débarquer, le dernier outil de Loic Lemeur est un des plus puissants sur le marché actuellement. Très beau graphiquement, il vous permettra de gérer tous vos comptes, votre veille et de créer plusieurs groupes d’utilisateurs ou de recherches.

De plus, vous pouvez lier votre compte Twitter à votre Facebook, Linkedin, SalesForce, …

Lien de téléchargement

Comme vous pouvez le voir, la plupart des clients Twitter ont les mêmes caractéristiques de bases, chacun rajoutant sa petite touche personnelle. Ce sera souvent un choix d’interface, d’ergonomie ou de prise en main qui vous feront choisir l’un ou l’autre de ces clients. Et surtout une habitude à prendre.

Et vous, quel client Twitter utilisez vous ?

HUD, le menu expérimental sous Ubuntu

La prochaine version de la distribution Linux la plus populaire se verra en effet affublée d’un nouveau concept, le HUD, destiné à remplacer les menus dans les applications conçues pour l’interface Unity.

Le HUD (Head-Up Display ou affichage tête haute en français) serait la solution efficace pour appeler dès que l’on en a envie toutes les fonctions disponibles dans votre application. Vous voulez sauvegarder ? Taper simplement « sa » et l’auto complétion vous proposera directement la sauvegarde. Vous souhaitez connaitre la version du logiciel sur lequel vous travaillez ? Tapez « about » et il vous ouvrira la page informations.

Shuttleworth explique cette envie d’évolution afin que l’interface se plie à noter intention. Fini les menus classiques qui encombrent l’écran, qui réclament une bonne connaissance pour savoir où trouver l’action que l’on recherche, … Ainsi, l’utilisateur sera directement connecter à son application.

De plus, HUD sera un menu intelligent ; il va apprendre de vos recherches et de votre utilisation pour mettre en avant les fonction les plus utilisées ou les plus adaptées. Se comparant avec l’interface Ruban de Microsoft, que plutôt que d’encombrer l’interface, il souhaite montrer aux utilisateurs que ce qu’ils souhaitent, quand ils le souhaitent.

Etape suivante, le contrôle vocal ?

Il se dit même que HUD pourrait être, à l’avenir, doté de la reconnaissance vocale. « Nous voulos qu’il soit facile de parler à n’importe quelle application, et que chacune de ces application répondent à notre voix » note Shuttleworth.

A l’heure actuelle, aucun détail sur les modifications à apporter à ses applications pour être pris en charge par HUD n’a été communiqué. Mais Shuttleworth a précisé que toute application écrite pour travailler avec le menu universel d’Unity sera supporté par HUD. De quoi rassurer les développeurs.

Il faudra attendre avril et la prochaine version d’Ubuntu pour pouvoir profiter de HUD. Soyez patients.

C’est pour pallier à ces problèmes que je vous propose ce plugin : Validity.

Il est très simple à utiliser, complet et très personnalisable. Que demander de plus ?

Il comprends un très grand nombre de validateurs déjà mis en place, comme le champ requis (la base me direz vous), validation en AJAX, valeur minimale, maximale, ou comprise entre 2 valeurs, … Vous pouvez aussi les personnaliser facilement en CSS.

Pour intégrer Validity à votre application web, rien de plus simple :

côté HTML :

<form method="get" action="test.htm">

                Number of Vehicles:

               <input type="text" id="vehicles" name="vehicles" title="Vehicle Count" />

                <br /><br />

                Date of birth:

                <input type="text" id="dob" name="dob" title="Birthday" />

                (mm-dd-yyyy)

               <br /><br />

                <input type="submit" />

            </form>

et pour ce qui est du javascript :

$("form").validity(function() {
    $("#vehicles")                      // The first input:
        .require()                          // Required:
        .match("number")                    // In the format of a number:
        .range(4, 12);                      // Between 4 and 12 (inclusively):

    $("#dob")                           // The second input:
        .require()                          // Required:
        .match("date")                      // In the format of a date:
        .lessThanOrEqualTo(new Date());     // In the past (less than or equal to today):
});

Je rappelle tout de même que comme c’est un plugin jQuery, il faudra bien sûr penser à inclure cette librairie dans la page.

Voici le site officiel du plugin Validity.

Du type : « Publié il y a 2 heures » par exemple.

L’utilisation de ce plugin peut donc s’avérer très pratique si vous travaillez sur des petites durées de temps, ou pour préciser plus clairement le temps écoulé depuis que vous avez publié un commentaire.

L’intégration de ce plugin est, comme la plupart des plugin jQuery, très simple à mettre en place :

Tout d’abord, intégrez jQuery et le plugin TimeAgo :

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>

Puis, il faudra lier TimeAgo au TimeStamp de votre DOM :

jQuery(document).ready(function() {
  jQuery("abbr.timeago").timeago();
});

Cela remplacera vos balises de type :

<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>

En

<abbr class="timeago" title="July 17, 2008">3 years ago</abbr>

Vous pouvez aussi gérer l’internationalisation ou la gestion du futur :

//Internationaliser les messages

jQuery.timeago.settings.strings = {
   // environ ~= about, it's optional
   prefixAgo: "il y a",
   prefixFromNow: "d'ici",
   seconds: "moins d'une minute",
   minute: "environ une minute",
   minutes: "environ %d minutes",
   hour: "environ une heure",
   hours: "environ %d heures",
   day: "environ un jour",
   days: "environ %d jours",
   month: "environ un mois",
   months: "environ %d mois",
   year: "un an",
   years: "%d ans"
};

// Gérer le futur

jQuery.timeago.settings.allowFuture = true;

Voici le site officiel de ce plugin.

Je vais plus vous conseiller de bonnes résolutions qu’un développeur devrait tenir, en lui permettant de continuer à fumer et à manger des burgers bien sales dans son canap’. Je suis pas génial ?

Apprendre un nouveau langage, framework ou méthodologie

L’informatique évolue à une vistesse incroyable, et les langages aussi. Il peut être intéressant d’ajouter de nombreuses cordes à son arc en travaillant un nouveau langage, ou même un framework sur son temps personnel. C’est un peu d’investissement mais cela peut réellement payer !!

Se former sur certaines méthodologies peut aussi s’avérer payant, pour améliorer vos façon de travailler et gagner du temps dans vos développement.

Avec de nombreuses technologies qui montent actuellement, pourquoi ne pas s’intéresser à HTML5, CSS3, Node.js, …

Améliorer ce que vous connaissez déjà

Il est très intéressant d’apprendre de nouvelles technologies, mais il est surtout important d’approfondir ses connaissances. On s’habitue souvent à reprendre nos bases, morceaux de code tout fait et on les adapte pour qu’ils collent à de nouveaux projets. Mais il peut être intéressant de creuser un peu plus loin dans nos connaissances, pour s’améliorer et gagner du temps au fur et à mesure.

Pourquoi pas même en profiter pour passer des certifications. Ca aide à travailler nos connaissances et en avoir une réelle théorie pour améliorer sa pratique.

Élargir ses connaissances

C’est assez proche, dans l’idée, du premier point, mais sans travailler le côté technique. Pourquoi ne pas travailler son côté marketing, sa communication, le graphisme, …

Il peut être intéressant, pour s’améliorer et préparer des évolutions ou un élargissement de son métier, d’en apprendre de nouveaux. Bien sûr, apprendre entièrement un autre métier prends beaucoup de temps. On ne va pas non plus reprendre des études et avoir un autre diplôme. Mais lire des livres, élargir sa veille, suivre des personnes qui ont des métiers communicant avec le notre, peut offrir une nouvelle vision sur son métier.

S’investir dans les communautés

Vous avez peut être déjà votre petit réseau de constitué : Un blog, compte twitter, github, … Si vous n’avez rien de tout ça, n’hésitez pas à vous lancer !! Twitter peut vous permettre de réaliser votre veille et d’y rencontrer beaucoup d’autres passionnés comme vous, lisez et rédigez des commentaires sur des blogs qui vous intéressent, contribuez sur GitHub.

Et n’hésitez pas à en faire de même IRL. Les afterworks (ça c’est intéressant), les conférences, meet-up, … Ce sera enrichissant non seulement pour vous, mais aussi aux personnes à qui vous apporterez. Et ce ne sera que bénéfique pour votre carrière.

Partagez votre savoir

C’est la première de mes initiatives pour 2012. A quoi bon réaliser tout ce travail, toutes ces études pour les laisser prendre la poussière dans votre tête ou votre disque dur. Le partage est la base d’internet ! De plus, c’est une bonne méthode pour affiner ses connaissances techniques, vérifier qu’on maîtrise bien, et surtout travailler la formation et la mise à l’écrit. Vous avez surement des documentations à réaliser au boulot, des spec. Travailler votre écriture est aussi très bénéfique pour améliorer la qualité de ces documents ô combien relou à réaliser, il faut bien l’avouer. Mais c’est important.

Personnellement, après 2 tentatives de blog pour lesquels je n’avais strictement rien fait, je me suis pris en main et ai enfin lancé ce partage. J’ai réalisé pas mal d’études en .NET, que je partagerais prochainement, et aussi sur l’API Twitter, qui fera l’objet de plusieurs articles. C’est aussi pour partager sur des points sur lesquels j’ai beaucoup galéré que je veux tenir ce blog.

Prenez bien soin de vous

C’est important mine de rien. Il est vrai qu’on travaille très bien la nuit, affalé sur le canapé, le laptop limite sur le ventre. Mais quand faut se lever le matin pour aller au taff, ça tire non ? On est parfois tellement pris dans notre dev qu’on en oublie de dormir, de manger, de se doucher. On est un peu les martyrs du web, on souffre pour le rendre meilleur. Et bien STOP !! Occupez vous aussi un peu de vous.

La qualité du travail passe d’abord par là. Mais aussi par du matériel de qualité. Allez hop, les sous de papi et mami vont passer dans l’achat d’un nouveau clavier/souris, un meilleur siège, un bon écran (bon j’espère que vos grands parents ont été généreux cette année). Organisez vous un espace de travail optimisé, ergonomique pour améliorer votre train de vie de dev.

Gérez au mieux votre temps

Combien de fois il vous est arrivé de vous dire « Flûte ! Je n’ai encore rien fait de ma journée » Oui, je sais, on ne dit plus flûte depuis près de 2 siècles, mais je voulais juste rester poli. On perds souvent beaucoup de temps en étant mal organisé, ou mal préparé, comme j’ai pu vous l’expliquer précédemment. Alors prenez du temps pour faire votre veille, améliorer vos connaissances, mais sans sombrer dans l’esclavagisme. Sortez boire un verre ou deux, aérez vous l’esprit, ça permets aussi de prendre du recul.

Mettez en place de meilleurs pratiques de développement

Au vu des évolutions actuelles dans le monde de l’informatique, vous savez qu’il faudra se replonger dans votre code de plus en plus souvent pour le maintenir. Vous avez vu à quel point tous les logiciels, applications, … sont mis à jours de plus en plus souvent. Comparé à votre micro onde, par exemple, ça n’a rien à voir.

Alors pensez à bien documenter votre code, utiliser des services de versionning, pour pouvoir plus facilement vous repérer dans vos mises à jour, … Parcequ’il n’y a rien de pire que devoir se replonger dans du code qui a plus d’un an et se dite « Zut, comment je faisais déjà, je sais plus où j’en suis« . Ca m’arrive pas mal et je fais de plus en plus d’efforts pour éviter de me retrouver dans ces tracas.

Se générer un petit revenu passif

Ca fait toujours du bien de se créer un petit pactole à côté de son job. Hébergement, boutique en ligne, des pubs sur votre blog, c’est un bon début. Vous pouvez aussi réaliser des thèmes WordPress et les vendre sur des marketplace, déposer vos scripts sur des sites qui les vendent, … il y a toujours moyen de générer un petit revenu de vos travaux personnels.

Ca vous paiera un petit resto ou une soirée au bar.

Et pourquoi pas … faire une petite pause

Après avoir tenu les 9 résolutions ce dessus, il va falloir penser à se ménager un peu.

Il faut savoir aussi se poser de temps en temps, faire un petit break, prendre du recul sur nos activités extra-professionnelles. Il est vrai que parfois, on veux profiter du week end ou des vacances pour fignoler ses projets. Mais il est très bon aussi de partir un peu en vacances, se reposer, ne rien faire sur la plage, les pieds en éventails.

Bon, je ne vous force pas à prendre ces résolutions bien sûr. Ce sont juste des petites idées à mettre dans le coin de sa tête et à lancer si le temps et la motivation sont au rendez vous. Ca ne pourra vous apporter que du bon, croyez moi.