Le site d’une graphiste pas comme les autres

Hello, je ne vous cache pas que je prend le temps de poster sur mon blog car on m’a gentiment fait remarquer qu’il était devenu invisible sur Google.

Je profite donc de ce moment privilégié pour vous parler d’Alice Chartrain, jeune graphiste pleine d’avenir (et jeune diplomée d’une licence pro. graphisme et édition). Sa spécialité est le graphisme print, donc tout ce qui sort sur papier : affiches, logos, édition, packaging, flyers, …

Elle est actuellement en recherche d’emploi, donc si vous avez connaissance de boites de graphisme qui recrutent, ou si vous avez des projets n’hésitez surtout pas à me contacter en commentaire. Son site Internet (hébergé sur le serveur familial) a été mis à jour récemment pour que vous puissiez vous faire une idée de son travail.

jQuery - Structure de plugin - Classe interne

De retour sur ce blog, j’aimerais partager une structure de plugin jQuery que j’ai mis au point. Je me suis inspiré du site officiel, et d’un autre site qui définit des design patterns de plugins.
L’idée est d’avoir une classe pour définir les méthodes (publiques ou privées) et pour sauvegarder l’état de l’instance. Dans mon exemple, la méthode “next” se souvient de la variable “i”. Egalement, l’appel des méthodes se fait à la mode jQueryUI (tel que conseillé par le site officiel).
Sans plus tarder, voici la structure que j’ai retenu :

/*
* Slider jQuery plugin
*/
(function($){
  $.fn.slider = function(method) {
    /**
     * Internal Class
     */
    var SliderClass = function($obj, options){
      var data = {};
      var i = 0;
      /* PUBLIC */
      this.type = 'SliderClass';
      this.dump = function() {
        console.group('SliderClass Dump');
        console.log($obj);
        console.log(options);
        console.log(data);
        console.groupEnd();
      }
      this.print = function(txt) {
        console.group('SliderClass Print');
        console.log(options.print_prefix+txt);
        console.groupEnd();
      }
      this.next = function() {
        console.group('SliderClass Next');
        doNext();
        console.log(i);
        console.groupEnd();
      }
      /* PRIVATE */
      function doNext() {
        i++;
      }
    }
    /**
    * Call mechanism
    */
    var args = arguments;
    // init
    if (typeof method === 'object' || !method) {
      var options = $.extend({}, $.fn.slider.defaults, args);
      return this.each(function() {
        var $this = $(this);
        if (!$this.data('slider')) {
          $this.data('slider', new SliderClass($this, options));
        }
      });
    }
    // methods
    else {
      return this.each(function() {
        var data = $(this).data('slider');
        if (data[method]) {
          data[method].apply( data, Array.prototype.slice.call( args, 1 ));
        }
        else {
          $.error( 'Method ' +  method + ' does not exist on jQuery.slider' );
        }
      });
    }
  };
  /**
   * default configuration properties
   */
  $.fn.slider.defaults = {
    print_prefix: 'Hello, I say : '
  };
})( jQuery );

Ce que j’apprécie dans cette structure, c’est qu’il est très simple d’ajouter des fonctionnalités, tout se passe sur la classe, et toutes les données sont préservées entre chaque appel.
Un exemple zippé prêt à l’emploi sur CE LIEN. Comme c’est du debug, ouvrez votre console Firebug pour voir le fonctionnement. N’hésitez pas à me faire des retours, j’ai essayé de mélanger ce qui me plaisait sur le net tout en simplifiant le code mais c’est sûrement perfectible.

Une petite formation CSS ?

Dans le Web, tout le monde fait du CSS, mais qui comprend vraiment ce qui peut se passer quand le rendu ne correspond pas à ce qu’on attendait ? Qui est suffisament à l’aise pour faire ce qui lui chante sans s’arracher les cheveux une seule fois ? En réalité, on a tous certaines lacunes ou points de mystère.
Je ne prétends pas avoir la connaissance complête et exacte de ce sujet, mais je le maitrise bien car il m’intéresse particulièrement. Dans le cadre professionnel, le besoin s’est fait sentir d’éclaircir nos connaissances et j’ai proposé de faire des recherches dans le but de présenter à mes collègues une formation CSS.

Sources et remerciements

Tout d’abord je tiens à remercier ProwebCE pour une bonne partie du temps de travail (en même temps je suis payé pour ça ).
Mes sources sont multiples et j’ai parfois pompé des parties entières, aussi je citerai les sites principaux en les remerciant de leur compréhension (des fois que ce sujet devienne connu !) :

• Alsacréations
• Zone CSS
• Net Tuts +
• Wikipédia (encore lui !)

La formation

La voici, la voilà !

• Fichier Powerpoint de la présentation
• Fichier Word contenant mes notes compilées, il peut être lu tel quel à la manière d’un cours

Les fichiers sont au format Office 2007, je pourrai les mettre en PDF si ça intéresse quelqu’un. La formation ne se veut pas exaustive mais veut surtout couvrir les points clés du CSS. Sauf cas précis, je ne parle pas des propriétés CSS (une centaine, voire plus avec CSS3) aussi libre à vous de mener vos recherches sur les points qui vous intéressent. Ca vous laisse l’occasion de faire des découvertes au fur et à mesure de vos développements, elle est pas belle la vie d’un développeur ?
Toute remarque ou suggestion est bonne à prendre, j’ai déjà eu quelques retours agréables en direct mais si vous découvrez que j’ai dit des horreurs n’hésitez pas à me le confier en commentaire.

Dévelopement sur Android - débuts avec Java et PhoneGap

Une des raisons qui m’ont fait acheter un téléphone Android est la liberté d’utilisation qui va avec. En tant que développeur il y a énormément de façon de s’éclater, le développement sur Mobile en faisant partie.

Autant développer directement en Java (langage de prédilection sur Android) a été très simple grace à Motodev et les tutos intégrés, mais l’utilisation de PhoneGap (pour développer en HTML/CSS/Javascript) a été plus compliqué, surtout sur Windows.

 

Pour commencer : Java et Motodev

Comme je viens de le dire, le langage de prédilection sur Android est Java. C’est un Java un peu particulier, un ensemble de classes propres à Android a été ajouté et le code est précompilé grace à la machine Dalvik. Je ne suis pas rentré dans les détails, tout ce que je sais c’est que ça améliore les performances et l’utilisation mémoire.

Le site officiel fournit un Toolkit à intégrer dans l’IDE Eclipse, mais c’est à vous de l’installer et de le configurer. Partant de ce constat, Motorola a créé une solution toute prête : Motodev. Cette solution est tout simplement Eclipse avec tous les outils déjà intégré. En dehors de quelques liens vers les technos Motorola, cet IDE n’est pas limité aux seuls téléphone de la marque. De plus, on peut même l’installer en plugin Eclipse plutôt qu’en bundle, encore une bonne raison de l’utiliser !

Pour l’installation c’est très simple : installer le Java Development Kit (JDK), se créer un compte sur Motodev (nécessaire pour télécharger les kits Android), installer Motodev. Au premier lancement, il demandera le répertoire de travail, sauf si vous l’avez installé en plugin. Je choisi alors un dossier séparé d’Eclipse. Après il vous demandera votre compte Motodev et la version du kit Android que vous souhaitez installer. Choisissez celle de votre téléphone, ou une version inférieure. Une fois installé, vous arriverez sur votre espace de travail, et vous pourrez consulter le tuto HelloAndroid ! Il faudra également configurer un périphérique virtuel pour tester vos applications sur l’émulateur, ou installer le pilote USB pour tester directement sur votre téléphone.

Voici un aperçu de l’interface de Motodev lorsque je teste mon HelloAndroid :

Installer PhoneGap

Je suis développeur Web. L’idéal pour moi est donc de retomber sur mes pieds et coder mes applications avec des langages que je connais bien. C’est pour ça que je me suis tourné vers PhoneGap, un soft qui fait l’interface entre le système et vos pages Web (qui constituent l’appli). En dehors du coté pratique de ne pas faire de Java quand on n’est pas expert, PhoneGap est compatible avec de nombreux téléphones (iPhone, Android, Windows Mobile, Blackberry, …) et gère lui meme la compatibilité avec les anciennes versions d’Android. A travers des objet Javascript, vous aurez accès aux éléments du téléphones tels que le GPS, l’accéléromètre, la barre de notification …

Installer Apache Ant

Pour utiliser PhoneGap, il va falloir compiler le fichier .jar, et pour cela il va falloir utiliser Apache Ant. Sur Linux, c’est presque trop facile : “sudo apt-get install ant”. Sur Windows, il faut passer par WinAnt.

Configurer les variables d’environnement

Sur Windows encore une fois (je sais pas comment c’est géré sur Linux) il faut également changer des variables d’environnement.

Tout d’abord, créer la variable ANDROID_HOME avec comme valeur “C:\Program Files\Motorola Mobility\MOTODEV Studio for Android 2.0\android_sdk” (sauf si vous l’avez installé ailleurs bien sûr). Ensuite, ajoutez à la fin de PATH “C:\Program Files\Motorola Mobility\MOTODEV Studio for Android 2.0\android_sdk\tools” pour avoir les outils Android à portée de ligne de commande.

Compiler PhoneGap

Téléchargez PhoneGap, dézippez le dans le dossier de MOTODEV, puis ouvrez la ligne de commande dans “C:\Program Files\Motorola Mobility\MOTODEV Studio for Android 2.0\phonegap\phonegap-android\framework” (nécessite d'etre admin, car on est dans "Program Files"). Exécutez :

android update project -p .
ant jar

Normalement vous aurez un beau “BUILD SUCCESS”

Tutoriel HelloPhoneGap

A partir de maintenant, vous pouvez suivre le tuto sur le site de PhoneGap. Juste 2 petites coquilles :

• J’ai du renommer js/phonegap.js.base en js/phonegap.js car la compilation ne l’avait pas fait,
• J’ai changé l'inclusion dans index.html (il manque le dossier js), d’ailleurs je conseille de les mettre dans /js/phonegap/ plutôt, car ces fichiers Javascript sont particuliers, ce sont ceux qui permettent d’accéder au périphérique.

Conclusion

Nous avons vu comment configurer un IDE basique, et y intégrer la technologie PhoneGap. Néanmoins pour aller plus loin, on pourrait peut-être mixer des éléments d’interface en Java et du contenu en HTML (pour faire une barre de navigation par exemple), ou utiliser un framework JS pour l’interface, tel que jQuery Mobile (en cours de dévelopement).

Mon expérience là dessus m’a montré que les performances ne sont pas là. Peut-être à cause de la jeunesse du projet jQuery Mobile, mais je pense que le simple fait de tout faire passer par du Javascript est loin d’être optimisé. Une bonne raison pour préférer Adobe Air à PhoneGap, ou pour réapprendre le Java ?

En bref : des nouvelles de mon blog - un serveur Web chez moi ?

Ca fait un moment que je n’ai pas posté sur mon site. C’est vrai que je ne prend plus le temps d’écrire des billets, je préfère Twitter pour lacher des liens.

Ce qui m’amène au coeur du sujet : je pense fusionner mon blog et mes posts Twitter, ou tout du moins faire apparaitre et regrouper sous forme de “brèves” des infos intéressantes qui ne demandent pas l’effort de rédiger un article.

Le soucis : sur Blogger ce n’est pas possible. Si j’ai choisi Blogger c’est que je ne veux pas payer un abonnement pour du loisir et les serveurs payant sont trop bridés pour du Wordpress. Je me suis dit que je pouvais m’acheter un ordi bon marché, compact, silencieux, économe en énergie (un NetTop quoi …) en tant que petit serveur personnel à faible traffic. Ainsi je pourrai faire tourner Apache (voire Lighttpd ou Nginx), Subsonic, héberger ma musique et mes films avec partage UPNP vers la Freebox, partager mon imprimante, etc. Bref, la liberté ! Et grace à Free et mon ip fixe, je pourrais migrer le nom de domaine actuel vers mon nouveau serveur.

Pour la machine, je penche fortement vers celle là : le Shuttle XS35-704. Elle consomme entre 30 et 40kWh, ce qui revient à une trentaine d’euros par an d’électricité. A titre de comparaison, ça correspond à la consommation électrique du boitier ADSL Freebox, qui reste lui aussi le plus souvent allumé 24h/24. J’ai testé les processeurs Atom, ils ne sont pas mauvais (pour du mono tâche) et j’ai fait un test avec ma machine actuelle, mon débit Internet tiens la route et mes sites sont accessibles sans délai excessif.

La migration ne se fera cependant pas du jour au lendemain. Mon choix n’est pas arrêté et comme je n’ai pas 400€ à claquer comme ça je préfère prendre mon temps. De plus je souhaite conserver mes posts et ma charte graphique (faite maison) ce qui demandera pas mal de boulot d’adaptation sur Wordpress avant de me lancer.

Ce qui me ramène à la raison première de ce sujet : je ne poste plus car j’ai l’esprit occupé. Si vous voulez des nouvelles fraiches, vous pouvez vous abonner à mes Tweets ! Na !

Premiers pas sur Android avec le Samsung Galaxy S

J’ai craqué ! Voici une dizaine de jours que j’ai mon nouveau téléphone. Ca faisait 6 mois que je n’étais plus engagé. J’ai donc pris le temps de comparer les différentes offres (sachant que je voulais SMS et Web illimité, et une faible durée d’appel car j’appelle très peu).

Mon coeur a longtemps balancé entre le forfait bloqué de chez Bouygues et celui de chez SFR, très proches. J’ai fait jouer la concurrence, et en appelant le service résiliation SFR j’ai pu obtenir un rabais sur le téléphone (qui du coup était au même prix que pour les nouveaux abonnés) et une réduction de 3€ par mois sur mon forfait. Une bonne affaire donc, qui m’a permis de faire plus de choses avec mon téléphone et d’en changer pour un de dernière génération (j’ai quand même payé 250€, ce qui n’est pas rien, mais c’est le contrecoup d’un forfait économique) : le Samsung Galaxy S i9000. Si vous avez besoin de conseil pour négocier, cliquez sur ce lien.

Le choix du téléphone

En ce qui concerne le téléphone en lui même, j’ai fait de nombreux comparatifs et pesé le pour et le contre. Je voulais absoluement un téléphone sous Android, je suis allergique à iTunes et aux restrictions imposées par Apple avec l’iPhone. Je ne me retrouve pas dans l’angouement aveugle des gens qui prennent un iPhone parce que tout le monde le fait en considérant que si tout le monde le fait c’est que ça doit être le must…

J’ai d’abord penché vers l’HTC Legend (trop petit écran), puis l’HTC Desire (qui souffre d’un problème de TouchScreen), sans perdre de vue l’iPhone 3GS (un peu vieux, sans flash) et l’iPhone 4 (antenne défectueuse) car s’ils ne me conviennent pas ce sont quand même de très bons téléphones.
Comme dit plus tôt mon choix s’est arrêté sur le Samsung Galaxy S i9000. Ce qui me rebuttait au départ, c’était sa trop grosse ressemblance avec l’iPhone (3GS surtout). Mais à part l’absence de Flash LED, ce téléphone a tout pour lui. La première chose qui frappe : son écran large Super AMOLED. Il est lumineux, avec des noirs profonds, des couleurs chaleureuses en plus d’être économe en énergie. Le téléphone est puissant (suffisament pour passer sur Android 3 lorsqu’il sera sortie) possède 8Go de stockage interne, et Samsung a décidé de mettre le paquet sur ce modèle (niveau suivi et communication). Alors oui, au premier coup d’oeil la forme du téléphone et la page “application” (qui n’est pas la page d’accueil) font penser à l’iPhone 3GS. Au final, je trouve le design de l’interface de Samsung plus classe, moins plate que celle de l’iPhone, et on oublie très vite la référence.

To root or not to root ?

Le premier réflexe certains est de Jailbreaker leur iPhone. Sur Android ce n’est pas nécessaire, de base on peut installer des applications qui ne viennent pas de l’Android Store. Par contre, ce qui touche trop au système ou au matériel est bloqué et réservé à l’administrateur (le compte “root”). Je ne vais pas m’étaler là dessus, j’ai choisi de ne pas rooter mon téléphone pour l’instant, car je trouve ça limite et pas d’une utilité folichonne.

Par contre, ce qui peut être intéressant (surtout quand on a un téléphone customisé SFR) c’est de mettre à jour son téléphone en le flashant avec une rom officielle Samsung. J’ai choisi de remplacer la rom SFR qui date de fin Juin, par la I9000XWJM2 qui date de fin juillet. Ainsi on règle :

• Le problème du GPS qui n’arrivent pas à vérouiller ses coordonnées,
• Certains problèmes de lenteur,
• Le Samsung Apps réapparait, ainsi que le logiciel de navigation GPS,
• Toute la customisation SFR disparait (peut-être le plus intéressant dans l’histoire)

Un avertissement cependant : vous perdez les applications SFR (mais sont présentes sur le Store), et vous perdez surtout la configuration pour la 3G. Suivez les instructions de cette page si vous voulez remettre votre téléphone d’aplomb. L’Android Market se voit également amputé de certains applications (ex: l’application 20 Min

Alors, au final, ce téléphone ?

Au final, je suis très content de ce téléphone (ca doit se sentir non ?). Pourtant il reste un gros point noir : le système de fichier RFS (copyright Samsung) qui a l’énorme inconvénient d’être extrêmement lent. En lecture ça va, 3.0Mo/sec à peu près, mais en écriture on descend à 0.08Mo/sec. Oui, vous avez bien lu. C’est catastrophique, surtout lorsqu’on réactualise le cache, qu’on installe des applications ou qu’on récupère des données (une simple récupération d’image lors d’un surf sur Internet par exemple). Un peu tout le temps quoi … Comme toujours, la communauté est réactive et a déjà trouvé une solution, mais je suis plutôt frileux avec ces modifs d’autant plus qu’il y a un risque d’user plus vite la mémoire interne du téléphone. Les résultats sont là : 2.2Mo/sec en écriture, et un système rapide comme l’éclair. Citation de la vidéo : It’s absolutly stupid fast !

Samsung sort un nouveau firmware courant Septembre, sur Android 2.2. Ca reste hyper tard pour un téléphone qui officiellement est lent et avec un GPS défectueux. Officieusement, les firmware de devs sont moins lents et sont fonctionnels, mais depuis début Août ils ont coincé le gars à l’origine des fuites. Espérons que dans les coulisses ils nous préparent le firmware du siècle.
Pour conclure, le Samsung Galaxy S a été récompensé par l’EISA en tant que “meilleur smartphone européen 2010-2011”, une jolie récompense pour un téléphone tout jeune, sortie cet été seulement.

Site du restaurant Croque au Sel

J’ai mis en ligne ce matin le site du restaurant Croque au Sel, petit restaurant à Chateauneuf en Thymerais (Eure et Loir). Si vous passez dans le coin, je ne peux que vous conseiller de vous y arrêter car ce restaurant vaut le détour.

Rien d’exceptionnel à dire niveau programmation sur ce site, à part qu’il a été fait en quelques jour avec un admin generator maison. La charte graphique a été faite par Alice Chartrain. Je profite de ce post pour faire de la pub pour ce site auprès de Google !