Skate in Mars

Flash bientôt libre ?

Jean-Philippe — Thu, 01 May 2008 13:47:00 +0200

Adobe vient de lancer l'Open Screen Project (http://www.adobe.com/openscreenproject/). Cette initiative a pour but de développer la technologie Flash (ainsi que AIR, une sorte d'équivalent au lecteur flash mais hors du navigateur web) sur toutes les plateformes multimédias : télévision, ordinateurs, téléphones...

Vous vous demanderez peut-être ce qu'on peut y gagner dans l'histoire ? Pour arriver à ce résultat, Adobe a tout bonnement décidé d'ouvrir les spécifications de SWF (le format de Flash) et les rendre accessibles sans conditions. Ces spécifications sont la base permettant de créer un lecteur flash. Pour l'histoire, elle sont actuellement accessibles à tout le monde mais il est interdit de les utiliser pour créer un lecteur. C'est pour cela que des projets comme MTASC ou Haxe se développent la ou les lecteurs libres tels Gnash ou SWFdec sont encore loin derrière le flash player officiel d'Adobe.

Actuellement le lecteur flash d'Adobe n'est pas près d'être libéré mais une fois les spécifications publiées librement on peut imaginer que les lecteur libres rattraperont rapidement leur retard.

Pour rappel 3 lecteurs flash sont disponibles sont ubuntu actuellement :
- Le lecteur officiel, non libre, grâce au paquet flashplugin-nonfree
- Gnash, du projet GNU : paquets gnash et mozilla-plugin-gnash
- Swfdec, inclus dans la dernière version de GNOME. Paquet ubuntu : swfdec-mozilla et swfdec-gnome
La page du wiki francophone rappele les procédures d'installation : http://doc.ubuntu-fr.org/flashplayer

Plus d'infos sur le projet Open Screen : sur Ajaxian, et sur ReadWriteWeb.

The missing link

Jean-Philippe — Thu, 01 May 2008 12:26:00 +0200

Bon, comme cela fait vraiment trop longtemps que je n'ai pas bloggué (même mr_pouit et illovae blogguent plus que moi Oo), il est temps de profiter de cette belle journée pour rester enfermé et sortir un bon petit tas de liens \o/

Mais avant, un petit pardon pour le downtime ce week-end et ce début de semaine, mon alimentation et ma carte mère sont mortes en même temps, et le seul magasin ouvert le lundi qui faisait des prix corrects a trouvé malin de me vendre une alim défectueuse... La bonne chose c'est que j'ai eu l'occasion de tester ubuntu 8.04 sur le eee (quoi, vous l'avez déjà installé sur votre pc principal ? vous êtes fous ?)

LA nouvelle c'est bien sur Dotclear 2 en Release Candidate ! On a beau râler, le travail accompli semble bien énorme. http://www.dotclear.net/blog/post/2008/05/01/Dotclear-20-RC1
Tant qu'a faire dans les releases : OpenBSD 4.3, le plugin del.icio.us pour FF3, Rails 2.1RC qui bouillonne, sans oublier Netbeans 6.1 que je teste actuellement et qui pourrait presque me faire oublier eclipse (je sais ce que vous allez dire, mais faut bien utiliser son core2duo et ses 4Go de ram de temps en temps :o )
Les utilisateurs de la dernière ubuntu ont sûrement remarqué que la zone de texte de message dans pidgin 2.4 n'est plus redimensionnable. Un choix plus que discutable qui a entraîné une bonne flamewar sur un ticket trac ouvert à cette occasion : http://developer.pidgin.im/ticket/4986#comment:272 Un plugin est apparemment tout de même disponible pour restaurer le comportement originel
Des trucs sympas et utiles en js : Une interface basée sur prototype pour recadrer une image (exemple d'implémentation rails); un gros tas de libs/scripts plus ou moins biens; et des exemples d'utilisation de mootools (qui roxe, rappelons-le)

Ca suffira pour quelques temps, j'espère ?

Dis vert !

Jean-Philippe — Fri, 08 Feb 2008 15:40:00 +0100

Bon voila, j'ai plein d'idées de billet hyper interressants, mais aucune motive, donc je vais faire un petit billet de lien pour donner l'illusion que ce blog est encore actif.
Hop hop trève de discussions :

Des mises à jour plus ou moins en retard : prototype 1.6.0.2, l'Acid Test 3, la reset.css de Eric Meyer et Geany 0.13 \o/ (la trad fr n'a pas été incluse dans le targz releasé, mais vous pouvez récuperer le .po depuis le svp, et non c'est pas ma faute )
Le Calendrier 2008 de la mauvaise utilisabilité. Marrant (20 secondes), mais il y a de vrais conseils dedans. Bon, par contre ce sont des conseils que tout le monde connait déjà, et on explique ni les causes ni les solutions...
En parlant de releases, tiens, ou en est Dotclear ? Ca discute, ca se raconte des histoires et chante des chansons entre eux, cool. Ca créé un site dédié aux thèmes et plugins, super ! On peut avoir une version stable maintenant ? Une date de sortie, une vraie roadmap ? Release early, release often qu'ils disaient...
De quoi regarder le soir au coin du feu (ou du micro ondes, sale étudiant pauvre !) : Les confs du CCC 2007
Un gros tas de howtos chez Slicehost : http://articles.slicehost.com/. Bien sur comme dans toute liste de liens, il y en aura peut-être aucun qui vous servira (hum, je dis ca dans une liste de liens moi ?)

Voila, si vous vous attendiez à plus d'explications, bah, tant pis.

Les gendarmes sous Ubuntu ?

Jean-Philippe — Sat, 26 Jan 2008 14:07:00 +0100

D'après plusieurs rumeurs (rien de confirmé donc), il semblerait que la gendarmerie nationale planifierait le passage de ses postes sous Ubuntu
Après la migration de l'assemblée nationale, ce serait donc un pas en avant pour l'implémentation de GNU/Linux en France et sa reconnaissance. Notons que la gendarmerie utilise déjà des solutions libres : OpenOffice.Org et Firefox.

Visiblement plus d'informations seront données lors du salon Solutions Linux.
Merci à Theo pour son journal récapitulatif sur linuxfr.

En vrac \o/

Jean-Philippe — Mon, 24 Dec 2007 00:37:00 +0100

Et oui vous croyiez pouvoir y échapper mais le revoila, le billet de liens !
Pas mal comme cadeau de Noël non ? (non)

Bref, passons aux choses "sérieuses" :

9 CSS Ethics Every Designer Should Have Quelques bonnes pratiques en CSS
Kohana PHP est un framework en PHP5 basé originellement sur Codeigniter. Il est complètement objet et corrige pas mal de manques et problèmes de CI. Il manque toutefois encore un peu de maturité avant de pleinement le remplacer, et les docs laissent à désirer. Un projet à surveiller donc (le développement avancant très vite, préférez la version svn pour tester).
Des sorties côté rails pour les endormis : Rails 2.0 (2.0.2), et Rubygems 1.0 (1.0.1)
En parlant de rails, les slides de la conf Paris on rails 2007 sont dispos et y'en a des biens (<3 Christophe Porteneuve as usual). Si vous kiffez les slides ~~mettez-en sous le sapin~~ voila aussi ceux de Paris Web 2007, qui sont moins bien (la preuve, yen a au format powerpoint)
En enfin je m'aperçois que j'ai honteusement oublié de faire un billet sur le Barcamp Marseille (d'un autre côté c'était pas si intéressant donc c'est pas trop grave ). Voila tout de même le lien vers la conf pour les intéressés : http://barcamp.org/BarCampMarseille1
Et pour finir (oui je finis 2 fois) sachez que skateinmars.net tourne maintenant sous nginx en frontend apache est toujours la pour les quelques repositories svn et pour les scripts php (bien que je pourrais le remplacer par php-cgi, j'héberge quelques personnes qui ont besoin de htaccess apache)

Sur ce, joyeux Noël toussa toussa o/

Session classroom éclair sur screen

Jean-Philippe — Thu, 22 Nov 2007 17:20:00 +0100

Note : En raison de l'indipsonibilité de u-classroom, effraie son hébergeur ayant perdu sa connexion, je m'occupe de publier cette annonce en espérant son retour le plus tôt possible !

Le channel IRC #ubuntu-fr-classroom est heureux de vous convier à son prochain
cours qui portera sur l'outil _screen_ ce mercredi 28 novembre 2007 à 20h00
(heure de Paris).

Screen est un gestionnaire de fenêtre pour votre shell. Il vous permet de
créer des fenêtres virtuelles, de naviguer entre elles, de les arranger à
votre sauce, etc. Screen (et ce que vous ferez dedans) existe indépendamment
de vous session utilisateur, ce qui laisse le champ libre à votre imagination
dans son utilisation.

Ce cours, qui ne devrait pas durer plus de trois-quart d'heure sur le papier,
va pouvoir vous donner les bases dans la prise en main de screen, quelques
astuces pratiques, ainsi que nous l'espérons une aisance dans son utilisation.

Il sera donc dispensé à 20h00, heure de Paris, sur le channel
#ubuntu-fr-classroom sur le réseau freenode (irc.freenode.net) le mercredi 28
novembre 2007.

Pré-requis pour ce cours :

avoir installé préalablement l'outil screen (disponible dans le dépot Main) :

par l'intermédiaire de synaptic
ou grâce à votre terminal : <code>sudo apt-get install screen</code>

des connaissances très sommaires sur l'utilisation du terminal :

savoir se déplacer, se repérer dans le terminal
savoir éditer un fichier au sein du terminal serait une bonne chose pour vous mais n'est pas obligatoire pour ce cours (utilisation de nano, vim, d'emacs etc)

À mercredi

phpMyAdmin and HTTPS on nginx

Jean-Philippe — Thu, 01 Nov 2007 12:29:00 +0100

Okay, this is just a really small post to resurrect the blog, but this could be useful as I lost some time looking for an answer to that problem, and that's why I'll write this one in english

If you're trying to set up a phpMyAdmin with nginx and an SSL vhost and fastcgi, you should have seen an issue with the urls produced by phpMyAdmin.

phpMyAdmin does not detect that the pages are served through an HTTPS connection and only detect the used port. It will result in urls like "http://phpmyadmin.mydomain.com:443/"

Trying to follow theses urls will result with nginx sending a 400 error like "The plain HTTP request was sent to HTTPS port"

I tried to dig in the code to see how phpMyAdmin was doing to detect HTTPS setups, and one of the few ways was looking for a $_SERVER['HTTPS'] variable set to 'on'. But in fact I didn't have to look for this as alxkbs already provided the (quite simple) solution on his russian blog : http://alexkbs.livejournal.com/208480.html

So, to have working HTTPS setup, you only have to add to snippet in your nginx vhost with your other fastcgi parameters :

fastcgi_param HTTPS     on;

phpMyAdmin will then properly detect the SSL setup and produce clean, working urls.

Hope this can save some time for people running into the same problem !

ET Quake Wars sous Linux, démo et client disponibles

Jean-Philippe — Tue, 16 Oct 2007 15:01:00 +0200

Depuis aujourd'hui, la démo de ET : Quake Wars est disponible pour linux (x86, amd64). Le client final du jeu complet devrait arriver sous peu d'après cette news sur linuxgames.

Vous pouvez la télécharger en torrent sur ce tracker : http://zerowing.idsoftware.com:6969/

Voici comment l'installer sous Ubuntu (feisty, la procédure devant être également valable pour les versions ultérieures) :

Téléchargez le fichier d'installation ETQW-demo-client-1.1-full.r5.x86.run (643.26Mb)
Une fois fait, rendez vous dans le répertoire d'installation, ouvrez-y un terminal et lancez l'installation ainsi : sudo ./ETQW-demo-client-1.1-full.r5.x86.run (ce qui exécutera le fichier)
Suivez les consignes de l'installeur, il vous faudra avoir installé les librairies SDL, et OpenAl pour le son ce qui devrait déjà être le cas si vous jouez à un fps tel Nexuiz ou Urban Terror.
En passant notez la configuration minimale requise qui est assez optimiste, j'avais du mal à jouer sur la version avec un amd 3000+ et une Géforce 6600. Des pilotes fournissant le support de la 3d sont bien sur obligatoires
Une fois l'installation terminée, si vous avez suivi les options par défaut votre jeu se trouve dans /usr/local/games/etqw.demo. Pour le lancer rendez vous dans ce répertoire et exécutez le fichier etqw

Un petit script pour pouvoir lancer le jeu sans se déplacer dans le répertoire peut-être créé dans /usr/local/bin ce qui sera plus pratique. Créez un fichier nommé etqw dans ce répertoire, donnez lui les droits d'exécution (avec chmod) et écrivez-y le contenu suivant :

#!/bin/sh

cd /usr/local/games/etqw.demo/
./etqw.x86

Il vous suffira ensuite de lancer le jeu dans votre terminal par la commande etqw (aucun raccourci n'est créé dans le menu applications).

Après un premier test le jeu marche très bien (testé sur un Core2Duo avec une Geforce 7950gtx et le SLI désactivé, en 1680*1050 et les optiosn d'affichage en medium ou low), un peu mieux que sous Windows niveau temps de chargement.
Des benchmarks arriveront bientôt sur Phoronix qui fournit déjà un tas de screenshots. (Je ne vous proposerais pas les miens, un bug m'empéchant de faire une capture correcte en plein écran)

Dernière note, pensez à lire la faq et notez que comme pour tout jeu id de la série doom/quake un répertoire .etqw sera créé dans votre home vous permettant d'éditer à la main la configuration du jeu (de nombreux tutos à ce sujet sont déjà dispos, ceux-ci étant valable sous windows comme sous linux).

Bon frag

Edit : le client linux est disponible :
http://www.phoronix.com/scan.php?page=news_item&px=NjEzOQ pour la news et
http://zerowing.idsoftware.com:6969/stats.html?info_hash=561e63fd63887faaecdc17632a551d49f512a66b pour le torrent

Le point sur les PPAs

Jean-Philippe — Fri, 07 Sep 2007 19:25:00 +0200

Depuis peu, on a vu apparaître une nouvelle fonctionnalité sur Launchpad : les Personal Package Archives, ou PPAs.
Cet outil permet aux packageurs de tous horizons et tous niveaux de construire et héberger leurs propres paquets en profitant de la structure déjà mise en place par Canonical pour les dépôts officiels.

L'annonce de la mise à disposition des PPAs par l'équipe de développement de Launchpad a été accueillie de façon très enthousiaste par bon nombre de packageurs.
Les PPAs ont en effet un avantage indéniable pour le développement et l'assurance qualité des paquets, en permettant par exemple de tester ces derniers avant leur envoi dans les dépôts officiels Ubuntu.
Les équipes ont également la possibilité de créer leur propre PPA, facilitant le travail collaboratif, puisque les membres d'une même équipe (telle que Medibuntu ou MOTUMedia) ont la possibilité d'utiliser un PPA commun pour travailler sur leurs paquets.

Mais au-delà de tous ces intéressants aspects (pour le développeur), réside une source de problèmes pour l'utilisateur.
Une dérive possible de l'utilisation des PPAs est le phénomène Pidgin.
En effet, lors du renommage de Gaim vers Pidgin, on a vu fleurir de nombreux paquets non-officiels... chacun se mettant à recréer depuis zéro son petit paquet personnel de plus ou moins bonne qualité (plutôt moins que plus d'ailleurs).
Il est aisé de prédire que ceci va s'étendre aux PPAs. D'ici quelques semaines, on disposera probablement d'une bonne demi-douzaine de PPAs proposant le même programme pour une même version d'Ubuntu (par exemple, pidgin pour Ubuntu 6.06). Comment s'assurer de la qualité des paquets, comment gérer les conflits qui naîtront entre les différents PPAs ? Le problème, qui a déjà été évoqué a plusieurs reprises concernant les dépôts tiers, pourrait donc prendre une dimension bien plus importante cette fois.

Il faut savoir que les PPAs sont également utilisés par les développeurs Ubuntu, et donc que la construction de 12 paquets Pidgin engendre une attente non négligeable pour ces packageurs.

L'argument récurrent concernant la légitimité de dépôts tiers est la mise à disposition de versions plus récentes de logiciels. C'est un argument fallacieux. Les versions stables d'Ubuntu le sont en grande partie grâce au gel des versions des logiciels. Importer une nouvelle version c'est ajouter un gros risque de bugs, de régressions ou de problèmes de dépendances, en particulier lors de mises à jours de bibliothèques ou de logiciels système (une mise à jour de dbus peut apporter beaucoup plus de soucis que de nouveautés). C'est d'ailleurs pour cette raison que les mises à jour pour les versions stables d'Ubuntu sont aussi limitées que possible (et n'apportent *jamais* de nouvelles versions de logiciels).

Un autre argument très souvent avancé est la mise à disposition de paquets n'existant pas dans Ubuntu (ou dans Debian). Il existe déjà des structures telles que http://mentors.debian.net/ ou encore http://revu.tauware.de/ qui permettent de proposer des paquets à l'inclusion dans les dépôts officiels Debian et Ubuntu.
De plus, si vous avez besoin d'aide, <pub>le chan #ubuntu-fr-classroom@irc.freenode.net est toujours peuplé de MOTU/core-dev/aspirants Développeurs Debian prêts à vous accueillir avec le sourire, dans la joie et la bonne humeur</pub>.

Conclusion: utilisez les PPA avec précaution (néanmoins si vous désirez réellement casser votre système, vous pouvez également utiliser Automatix2, efficacité garantie)

(ce billet est fièrement propulsé par Gobby, et est le fruit d'un travail coolaboratif de membres d'u-classroom.net )

Chaînage de méthodes en JavaScript

Jean-Philippe — Wed, 05 Sep 2007 23:05:00 +0200

Lorsque l'on code en JavaScript (et dans bien d'autres langages), on se retrouve parfois avec des tartines de code qui utilisent plusieurs méthodes d'un même objet. Par exemple :

document.getElementById("infozone").className = "affiche";
document.getElementById("infozone").innerHTML = "Hello";
document.getElementById("infozone").style.display = "block";

(Exemple fictif, on ne devrait surtout pas utiliser .style.display et .innerHTML)
L'exemple est explicite, on va ajouter la classe affiche, insérer le texte "Hello" (et remplacer le HTML existant) et modifier la propriété CSS display de l'élément "infozone".
Ce genre de code est assez répétitif, mais heureusement les grandes librairies javascript nous permettent de gagner du temps grâce au chaînage de méthodes.
Comme son nom l'indique cela consiste à enchaîner les méhodes sur un même objet.

Pratique

Pour plus de clarté on va voir des exemples avec les bibliothèques Jquery, Mootools et Prototype pour réduire le code utilisé en exemple et le rendre plus propre.

1. Prototype

Inutile de présenter prototype, la bibliothèque utilisée par rails et une des plus mises en avant.
$() est un raccourci vers document.getElementById(), en plus d'étendre l'élément sélectionné en lui ajoutant des méthodes assez utiles (on peut également lui passer un élément html quelconque en argument pour profiter des méthodes étendues de prototype).

$("infozone").addClassName('affiche').update("Hello").show();

Quelques améliorations : addClassName nous permet de conserver les classes deja existantes de l'élément et update permet de nettoyer le html inséré.

2. Mootools

Mootools est une librairie pas tellement connue mais rapide et légère et est assez puissante au niveau des effets que l'on peut utiliser. On peut également choisir de télécharger seulement quelques éléments de la lib pour encore alléger le tout.

$("infozone").addClass("affiche").setText("Hello").setStyle('display', 'block');

La méthode d'ajout d'une classe est plus claire que pour prototype, par contre il n'y a pas de méthodes du genre show() ou hide() (c'est un choix des développeurs qui estiment que setStyle fait son boulot).

3. Jquery

Jquery est une bibliothèque assez à la mode en ce moment et qui a justement popularisé le concept de chaînage de méthodes car il repose essentiellement sur ce concept comme le montre le site et les démos.

$("#infozone").addClass("affiche").text("Hello").show();

La grande différence est visible dans la fonction $ qui contrairement aux autres libs est utilisé avec des sélecteurs (ici on utilise le sélecteur CSS "#" qui identifie l'id d'un élément). On peut également utiliser des sélecteurs CSS3 ou XPath. Prototype et Mootools utilisent tous deux la fonction $$() pour cet usage.
La fonction text est aussi assez différente car elle est utilisée de deux manières : appelée avec un argument elle se comporte comme update() ou setText(), mais si on l'appelle sans argument elle renverra le texte de l'élément (auquel sera retiré les balises HTML).

Comment ca marche ?

Le principe est en fait très simple.
Chacune des méthodes que l'on a vu renvoie l'élément sur lequel elle a été appliquée.
Voici par exemple le code de la méthode Element.hide de prototype :

hide: function(element) {

$(element).style.display = 'none';

return element; // <-- la magic touch

C'est donc sur cet élément que l'on va appliquer la prochaine méthode de notre chaîne de fonction.

Pour aller plus loin, vous pouvez également lire mon précédent article "Des sous-menus déroulants non obstrusifs avec Jquery" ou l'on peut voir l'utilisation du chaînage de méthode pour gagner en clarté et en taille dans un script non-obstrusif, en plus de se déplacer dans le DOM :

$(this).parent().parent().children("li").find("ul.montre").slideToggle("").removeClass("montre").addClass("matched");

PS : J'espère que cet article vous aura donné envie d'utiliser une des nombreuses bibliothèques Javascript mises à disposition, sinon, voici 6 raisons pour le faire.

Setup CodeIgniter on Nginx server with fastcgi

Jean-Philippe — Mon, 03 Sep 2007 15:26:00 +0200

(Yes, I decided to write a post in english, as this might be useful for a lot of people).

Today I lost some time trying to set up code igniter with fastcgi and an nginx server. Google wasn't really helpful but I found a part of the answer on this thread in the ci forums but I had to dig through the nginx and ci config files. Here is what I have finally done to make this work.

First you have to set up a rewrite rule if you want ci's nice urls (example.com/controller/method/param). I assume you use different vhost files with a specific server directive in each. So, in your nginx config file, configure your server_name, logs, and listen directives as usual, then use this for the / location :

  location /
  {
    index index.php;
    root  /path/to/your/ci/directory;

    if ($request_filename !~ (js|css|images|robots\.txt|index\.php.*) ) {
      rewrite ^/(.*)$ /index.php/$1 last;
    }
  }

Replace the root param with your web directory, which will contain your static files. You can modify the $request_filename regexp to exclude files and directories (if you have a files/ directory for example) from the rewrite.
Note the ^/ in the regexp part from the rewrite, this will avoid getting urls like /index.php//method. I don't know if this is mandatory as the user won't see this rewrite.

Then, add this :

  location ~ /index.php/
  {
    include /usr/local/nginx/conf/fastcgi.conf;
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  /path/to/your/index.php;
    fastcgi_param  REQUEST_URI      $request_uri;
    fastcgi_param  QUERY_STRING     $query_string;
    fastcgi_param  REQUEST_METHOD   $request_method;
    fastcgi_param  CONTENT_TYPE     $content_type;
    fastcgi_param  CONTENT_LENGTH   $content_length;
    fastcgi_pass   127.0.0.1:9000;
  }

This will redirect queries to /index.php/* to your fastcgi thread. I had to use the location directive because nginx doesn't allow to change fastcgi_params within a rewrite directive.
Some fastcgi_params could not be necessary for you depending on your fastcgi.conf. Of course you have to adapt the include and fastcgi_pass directives for your setup. This website : http://www.alrond.com/en/2007/jan/25/performance-test-of-6-leading-frameworks/ will provide additional informations on php+fastcgi if you need. You can also see the nginx documentation.
Note that the SCRIPT_FILENAME parameter points directly to your index.php file, not to $fastcgi_script_name as usual.

You can now test this setup, which should work... Err, not really. You can see your default controller but your queries to other methods arn't working. CI does not see your request, so you'll have to change his configuration.

Edit the (system/)application/config/config.php file and look for the $config['uri_protocol'] config option. Change it to :
$config['uri_protocol'] = "REQUEST_URI";
Now CI can retrieve the full URI and your application should work fine.

I hope this can be useful for someone

Les restes du monde

Jean-Philippe — Sat, 21 Jul 2007 00:45:00 +0200

Tout va mal en ce moment... Un nuage toxique se ballade en Ukraine, du nucléaire se ballade au Japon...

Mais heureusement il existe encore des gens pour nous faire rêver. Si vous regardez la télévision plus de 5 minutes par jour vous avez sûrement entendu parler du leak du dernier Harry Potter. Quelques jours avant la sortie du dernier tome du bouquin un adolescent a pris en photo les centaines de pages du bouquin pour les poster sur le net, faisant le malheur des auteurs. En effet il y a du avoir des millions de gens pour se précipiter pour lire des photos de livres de pas trop bonne qualité en plus semble-t-il, malgré que l'appareil qui ait servi à les prendre soit plutôt haut de gamme (comme on peut en juger en regardant les infos exifs dans les jpgs postés qui donnent également le numéro de série de l'appareil, ce qui est assez sympathique).
Ceux qui craignent (craignaient ?) les spoilers peuvent toutefois être calmes, ce sont de grands journaux (anglais, américains ou français comme le parisien) qui se sont chargés de révéler toute l'histoire après avoir acheté un exemplaire à des libraires peu respectueux des dates de sorties officielles)

Mais il y a mieux. Un groupe s'est formé sur The Pirate Bay (tracker ou vous pourrez trouver toutes les releases de Harry Potter donc) afin de recopier à la main le texte depuis toutes ces photos pour en faire un pdf. On ne peut douter de l'utilité de leur action, sachant qu'à cette heure-ci le livre devrait être disponible dans toutes les librairies.

Un truc marrant tout de même, la release en .txt permet de s'amuser avec quelques recherches...

% cat hp7.txt|grep die |wc -l
141
% cat hp7.txt|grep Voldemort |wc -l
440

Voila, vous pouvez vous coucher devant ces infos cruciales.

PS : Désolé, on nous a gavé avec ces histoires de Harry Potter et j'en reparle sur mon blog, mais j'aime j'aime bien être lourd
PS2 : Si vous n'avez jamais lu les bouquins, évitez de perdre votre temps, ca n'a rien d'extraordinaire, lisez les spoilers puis allez voir ca
PS3 : nginx rulez \o/ http://survey.netcraft.com/Reports/0706/

Blog's not dead !

Jean-Philippe — Sat, 07 Jul 2007 00:50:00 +0200

Je suis toujours la....

Pour la peine :

skateinmars@tauri:~% date +%d/%m/%y

07/07/07

Vous pouvez retournez vers les blogs intéressants

Pimp my links

Jean-Philippe — Thu, 07 Jun 2007 15:00:00 +0200

Je n'ai pas d'idées de blabla à mettre autour, alors voici directement les liens :

visualcomplexity.com | A visual exploration on mapping complex networks Une facon marrante de visualiser divers sites, projets ou autres
13eme Rue » Nouveautés » Quand l'Internet fait des bulle Un reportage (une petite heure) sur la première bulle Internet. Assez marrant et plein d'anectodes
Data Grids with AJAX, DHTML and JavaScript | Smashing Magazine Une liste assez complète de solutions à base de Js/Ajax pour rendre vos tableaux plus dynamiques
http://gpl.internetconnection.net/vi/ Un vi en javascript !
Why Google Is Making Us Dumber Article interressant sur comment nos habitudes changent "grâce" à google
70 Expert Ideas For Better CSS Coding | Smashing Magazine Une liste assez complète et bien organisée

Et voila, un billet de plus
PS : Désolé pour le titre

Des sous-menus déroulants non obstrusifs avec Jquery

Jean-Philippe — Wed, 06 Jun 2007 09:50:00 +0200

Lors de mon stage, j'ai dû réaliser le prototype d'une page d'accueil qui comprenait plusieurs rubriques et sous-menus.
Le nombre d'éléments à présenter étant trop important il fallait cacher les sous-menus et les afficher à la demande.
Le tout devant être non obstrusif j'ai finalement décidé d'utiliser Jquery pour réaliser des menus déroulants.

La solution est ainsi très élégante et ne requiert que peu de Javascript. Le balisage HTML reste également très propre et valide même si on peut encore améliorer ce côté-ci.
Analysons ce dernier :

<div id="menus">
    <div id="enfants">
        <h2>Accueil d'enfants</h2>
        <ul>
            <li id="enfants_da">
                <a href="http://blog.skateinmars.net/post/2007/06/06/#">Déficients auditifs</a>
                <ul>
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 1</a></li>
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 2</a></li>
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 3</a></li>
                </ul>
            </li>
            <li>
                <a href="http://blog.skateinmars.net/post/2007/06/06/#">Déficients visuels</a>
                <ul id="enfants_dv">
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 1b</a></li>
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 2b</a></li>
                    <li><a href="http://blog.skateinmars.net/post/2007/06/06/#">Centre 3b</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div id="adultes">
    <!-- Même balisage que pour les enfants -->
    </div>
</div>

Par défaut on doit voir uniquement le titre de la rubrique (le <h2>) ainsi que les liens.
Le tout doit également être visible avec un navigateur ayant le javascript désactivé mais utilisant les CSS, on ne va donc pas utiliser directement ceux-ci pour cacher le <ul> des sous-rubriques.

Voici le code javascript qui utilise donc Jquery.

<script type="text/javascript">
    $(document).ready(function(){

    $("#menus div ul ul").hide();
    $("#menus div ul ul ul").show(); //sous-sous-menus

    $("#menus div ul li a").click(function(){
        $(this).parent().parent().children("li").find("ul.montre").slideToggle("").removeClass("montre").addClass("matched");
        $(this).parent().children("ul").not(".matched").addClass("montre").slideToggle("slow");
        $(this).parent().parent().children("li").find("ul.matched").removeClass("matched");
        if ($(this).attr("href") == "#") {
            return false;
        }
    });

    }); //fin onready
</script>

Notez que ce code suffit pour _tous_ les menus (les <div id="enfants">, <div id="adultes"> etc).
Le tout est donc assez compact et élégant en plus d'être adaptable facilement.

Commencons par la fonction de base à utiliser : $(document).ready();
Le paramètre à passer à cette fonction est une fonction qui sera appelée lorsque le DOM sera prêt (entre le chargement du HTML et celui des éléments externes tels que les images).
Remarquez si vous ne le saviez pas que Javascript nous permet d'utiliser ici une fonction anonyme : function(){} en paramètre, ce qui évite de créer la fonction ailleurs.

Le code commence donc réellement à l'intérieur de cette fonction.
La première ligne permet de cacher les sous-menus. La fonction $() retourne les éléments Jquery qui correspondent aux sélecteurs demandés en paramètre. On peut utiliser comme ici du CSS mais aussi Xpath par exemple.
Cette fonction est comparable à la fonction $$() de Prototype.
On applique donc ici la méthode hide() à tous ces éléments. Tous les sous-menus seront ainsi cachés (facile non ? ).
La deuxième ligne est necesaire pour éviter aux sous-sous-menus (des <ul> dans les <ul> des centres, ici cela peut-être des services internes d'un centre) de rester constamment cachés à cause de la première règle.

Passons donc au coeur de la technique avec la fonction suivante. Ici on applique à tous les liens une méthode qui permet de leur associer une action lors d'un clic (au lieu d'utiliser onclick directement dans le HTML).
Comme pour le $(document).ready(); on passe une fonction anonyme en paramètre qui représentera l'action à effectuer.

La première ligne de cette fonction montre la particularité de Jquery qui est le chaînage des méthodes. Chaque méthode renvoie en effet l'élément sur lequel il agit.
Le $(this) représente ici l'élement sur lequel on greffe l'evènement, c'est donc la balise <a> dans notre cas.
Les deux parent() permettent de remonter dans le DOM : on se retrouve donc à agir sur la balise (on devrait parler de noeud plus exactement) <ul>.
Avec children("li") on peut voir que Jquery va gérer sans problème le fait que l'on se retrouve avec plusieurs éléments.
find() permet ensuite de 'trier' les éléments trouvés, ici un <ul> qui possède la classe montre.
On applique ensuite la méthode slideToggle() qui est celle qui permet d'obtenir l'effet de menu déroulant (voir la démo sur le site de Jquery).
On enlève ensuite la classe "montre" avec une simple méthode.

La deuxième ligne est celle qui va montrer le sous-menu demandé (le <ul> présent dans le même <li> que le lien) et y ajouter la classe montre.
La troisième enlève la classe "matched" à tous les éléments qui la possédaient auparavant.

Un peu d'explications : les éléments montrés se voient ici appliqués la classe "montre" ce qui permet de savoir quels éléments sont affichés ou non.
En effet on souhaite n'afficher qu'un seul sous-menu à la fois, il faut donc cacher les sous-menus déjà montrés (ceux qui possèdent la classe montre).
La classe matched permet d'éviter de cacher puis remontrer directement un sous-menu sur lequel on a cliqué deux fois :
en effet, on peut imaginer que si l'utilisateur clique sur un sous-menu une deuxième fois ce sera pour le cacher.
On trie donc dans la règle d'affichage les éléments matched car on sait que ceux-ci ont déjà été cachés. On enlève ensuite cette classe pour éviter des problèmes à la prochaine utilisation.

Le dernier test permet de renvoyer false si le lien a pour cible '#'. Cela permet de ne pas remonter en haut de la page, mais laisse la possibilité d'utiliser de vrais liens dans le menus (si l'on ne souhaite pas de sous-menus dans une partie précise).

C'est tout ! Je ne propose pas de capture d'écran ou de démo, la page étant pour le moment utilisée uniquement dans l'association ou je réliase le stage, mais voici le css que j'utilise :


#menus {
margin-left: 20px;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
font-family: Verdana, sans-serif;
font-weight: bold;
color: #456b90;
height: 700px;
}
#menus a {
text-decoration: none;
}
#menus div {
position: absolute;
margin-top: 10px;
}
#menus div ul {
width: 150px;
margin-top: 0px;
margin-left: 0;
padding-left: 20px;
background-color: #FFFFFF;
}
#menus div h2 {
font-size: 19px;
font-family: "Trebuchet MS", sans-serif;
margin-bottom: 7px;
}
#menus div ul li p {
margin: 1px;
padding: 4px;
}
#menus div ul li ul {
background-color: #75b9e4;
padding: 4px;
font-size: 12px;
font-weight: normal;
list-style-type: none;
margin: 0;
}

#enfants {
left: 700px;
top: 30px;
}
#enfants h2 {
color: #6be32f;
}

Chaque sous-partie (enfants, adultes) est positionnée de manière absolue dans la page avec left et top.

On peut donc conclure en affirmant sans problèmes que Jquery permet de réaliser plusieurs effets graphiques dans la page, de manière assez simple et surtout en restant accessible et non obstrusif

J'ai peu parlé de Jquery, on aurait pourtant pu dire que la lib est légère (une version compréssée étant de plus disponible), rapide, bref un bon candidat au remplacement de Prototype. Voici quelques liens comme d'habitude

Happy birthday... to me

Jean-Philippe — Mon, 28 May 2007 22:01:00 +0200

Voila, j'ai 20 ans, et ca fait... rien.

C'est nul en fait.

(En fait ce post mylife est en réponse à ma déprime due au fait que la plupart des joyeux anniversaires recus aujourd'hui viennent de mails automatisés de forums ou autres sites publicitaires et que je n'ai même pas eu l'occasion de faire une soirée pour fêter ca /o\ )

Votre agrégateur a maintenant 2 heures pour se mettre à jour avant que je me fâche

CodeIgniter, un framework PHP qu'il est bien

Jean-Philippe — Wed, 23 May 2007 22:34:00 +0200

Ruby on Rails est peut-être à la mode mais je n'ai jamais été trop utilisateur des dernières technologies jusqu'à maintenant même si j'aime me tenir au courant. Pourtant, les frameworks web permettent de gagner énormément de temps en s'occupant de pas mal de tâches répétitives qui ne sont jamais fun pour un développeur.

Pour regagner un peu de fun dans le développement PHP de nombreux frameworks ont commencé à apparaître tels CakePHP, Symfony ou encore le Zend Framework qui deviendra certainement bientôt celui de référence car écrit par l'équipe des développeurs de PHP eux-mêmes.

J'avais besoin de rapidement créer quelques pages pour mon site (http://skateinmars.net) et j'ai voulu voir ce qui se cachait derrière l'idée d'un framework.

Voici donc CodeIgniter (http://codeigniter.com/) qui me semble un peu moins connu mais qui mets l'accent sur la simplicité et la légèreté. Il propose donc peu de fonctions mais est très modulaire, et se veut compatible avec PHP4.

La simplicité, est réellement la raison clé du choix de ce framework. Contrairement à une "usine à gaz" comme Symfony (ce n'est pas forcément un défaut, les créateurs annoncant eux-mêmes Symfony comme réservé aux grosses applications web de niveau "corporate"), CodeIgniter n'a pas d'interface en ligne de commande, ni de fichiers de configs évolués pour générer une partie du code.
Pour l'installer on va donc simplement décompresser un fichier, modifier deux/trois variables dans un fichier de config en PHP et c'est prêt.

Mais au lieu de comparer CodeIgniter (que j'appellerai CI pour moins me compliquer à écrire) à d'autres frameworks voyons plutiôt les features qu'il propose et que l'on peut attendre d'un framework aujourd'hui, ainsi que ses particularités ce qui vous permettra de choisir par vous-même.

Premier point, l'architecture : comme beaucoup de frameworks, y compris le célèbre Ruby On Rails, CI propose un système Modèle-Vue-Contrôleur. Pour expliquer rapidement, ce modèle sépare le code en trois parties :

d'un côté l'aspect présentation (Vue) qui représente comment l'utilisateur verra l'information. Le plus souvent ce sera donc une page web mais cela peut aussi être un flux RSS, un fichier XML etc... cette partie gérera donc par exemple l'utilisation des templates à utiliser.
de l'autre le côté Modèle qui définit comment accéder aux données et les modifier. Par exemple, c'est ici qu'on pourra y définir les méthodes nécessaires à la création d'une news ou à la récupération des commentaires d'un article de blog.
Le contrôleur va lui servir à relier les deux autres parties : selon ce que demande le visiteur, il va chercher les données appropriées depuis le modèle, puis les transmettre à la vue qui conviendra.

Dans la pratique, on utilisera une classe pour chaque modèle souhaité (par exemple, articles, ou commentaires), que l'on nommera et placera dans un dossier models définit par CI.
Les vues seront des fichiers PHP classiques ou se mélangeront code PHP et HTML. Des helpers sont mis à dispositions, ce sont des fonctions qui permettent de faciliter l'écriture d'un lien, d'un formulaire, etc...
CI étant modulaire, on peut tout à fait utiliser un moteur de template classique comme Smarty ou TinyButStrong sans problèmes particuliers (à part peut-être la nécessité de s'occuper différemment du cache des fichiers).

Le contrôleur est la partie la plus interressante. En fait, c'est la seule partie qui est strictement necessaire. On peut d'ailleurs y mélanger des tâches dévolues aux vues ou au modèle sans problème, même si cela reste déconseillé pour des raisons d'organisations et de clarté.
Les contrôleurs seront également déterminants car ils définissent les URLs du site.
Par exemple, le contrôleur Contact sera une classe Contact (qui étend la classe controller) placée dans le fichier contact.php du dossier controllers. On y créera les fonctions index, et par exemple send.
Le visiteur ira ensuite sur site.com/contact, et CI déclenchera automatiquement la fonction index de la classe Contact. Magique
Si la fonction send prend en paramètre une personne, le visiteur cliquera ensuite sur un lien vers site.com/contact/send/bob, et la fonction send pourra ainsi chercher une vue qui par exemple affichera un formulaire pour contacter l'utilisateur Bob.

Voila donc l'utilisation de base de CI. Il propose bien sûr d'autres fonctionnalités, comme l'URI routing : on peut par ce moyen rediriger une demande d'URL vers un autre URL pour utiliser un autre contrôleur et une autre fonction (de manière plus ou moins complexe grâce aux expressions régulières).

CI propose de plus une série de librairies pour faciliter les tâches courantes du développement web : l'envoi de mail, l'accès à un serveur FTP, la manipulation d'images et de fichiers, les sessions et ainsi de suite.

CI permet également de créer ses propres librairies, ses plug-ins (simples fonctions) ou encore l'utilisation de hooks, fonctions qui agissent à différents moments du traitement de la requête pour modifier le comportement de CI lui-même, encore une fois preuve de sa modularité.

Voila pour une introduction à CodeIgniter qui ne va pas très loin (je n'ai pas parlé du scaffolding par exemple), mais j'espère vous avoir convaincu de l'utilité d'un framework, et de donner une chance à CodeIgniter
Sachez que le niveau requis n'est pas très élevé, il vous suffira de connaître (sans forcément avoir déjà pratiqué) les bases de la programmation objet et d'avoir un minimum d'expérience avec PHP ne serait-ce que pour comprendre les objectifs et les besoins auxquels on fait face lors de la création d'un site ou d'un application web.

Les liens à ne pas manquer pour aller plus loin :

http://codeigniter.com/ Le site officiel
La documentation, très bien faite avec de nombreux exemples
Le wiki regorges de helpers, bibliothèques et autre plugins créées par les utilisateurs. Le forum, du peu que j'en ai vu, est quand à lui assez actif et une assez bonne ambiance y règne (quoique les utilisateurs se clashent parfois avec les devs de CodeIgniter, employés de EllisLab).
Certains utilisateurs ont d'ailleurs créé CIForge qui regroupe des projets autour de CI.
Et pour finir, les screencasts (à la mode depuis RoR) qui vous donneront une idée de CI grâce à un tutorial vidéo.

Mes projets pour l'an prochain

Jean-Philippe — Wed, 23 May 2007 21:48:00 +0200

Tout d'abord je previens les âmes sensibles : ce billet n'est pas une liste de liens, il est mylife © compliant, et tout le monde s'en fout. En fait je m'en fout un peu aussi mais ca me permet de me remettre à blogguer des articles avec du vrai texte dedans donc je l'écris quand même, na.

Merci aux courageux qui lisent encore
J'ai bientôt fini mes deux ans passés en DUT SRC (qui semble assez répandu chez les ubunteros), et ne voulant pas trop continuer dans des études longues, j'ai décidé de postuler dans 3 licences pro qui me paraissent assez interressantes. Et comme, qui sait, peut-être te rencontrerai-je toi lecteur, je me dois de partager mes projets :

Premier choix : la licence Activités et Techniques de Communication option Multimédia, Internet, Webmaster. Le nom est pas top mais le programme a l'air pas mal avec un peu de graphisme, pas mal de prog et des projets web (peut-être trop de flash par contre). La licence est rattachée à l'université d'Aix-En-Provence mais se trouve à Gap, une sympathique ville de montagne que je connais un peu donc c'est bien.
La licence Systèmes Informatiques et Logiciels option Développpement d'Application Intranet/Internets a également retenu mon attention, pas pour la ville (Clermondt-Ferrand qui ne me pas l'air d'être réputée pour quoi que ce soit) mais pour son aspect à fond sur la programmation. Bon par contre ils annoncent du Java voire .NET, mais on peut se consoler en se disant que ca sera plus facile de se mettre à un langage fun à la ruby/python après
La dernière licence sort un peu de mon projet (devenir webdeveloppeur parce que le ouaibe caylefutur, sachez le) mais vu qu'elle représente le bien, elle m'a plus. Il s'agit donc de la licence SIL option Administrateur de Systèmes et Réseaux à base de Logiciels Libre. Au programme de l'administration donc (LAMP, samba...) et un peu de développement d'applis web semble-t-il.

Voila, si une de ces licences vous a plu et que vous aimeriez postuler avec votre bac +2 en poche à la fin de l'année, bah il est presque trop tard à part pour la licence ASRALL (mais ne postulez pas, sinon j'aurais moins de chances d'être pris /o\ )

Je ferais sûrement un autre post pour annoncer ou j'irai gland^Wétudier l'an prochain, d'ici la vous pouvez retourner lire des blogs interressants ou des listes de liens pourris.

Encore et toujours des liens

Jean-Philippe — Sun, 13 May 2007 14:23:00 +0200

Ca vous avait manqué hein

On commence direct avec :

Sortie de Prototype 1.5.1 (et scripaculous 1.7.1 beta 2 dans la foulée)
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ Une css pour effacer les différences entre les navigateurs et mettre à zéro la plupart des styles de base, pour bien démarrer un design
http://thecodist.com/fiche/thecodist/article/we-are-all-open-source-billionaires bon article sur l'open source en réponse à Where are all the open source billionaires
http://www.seifi.org/?p=482 Une revue des méthodes pour diminuer le poids de vos fichiers javascript et css
http://rnc000.blogspot.com/2007/05/api-design-guidelines.html (le sujet est dans le titre) un bon article clair, avec des conseils pas mal réutilisables
http://blog.case.edu/gps10/2007/04/29/so_many_untapped_php_features Une critique de quasiment toutes les applications PHP actuelles
http://www.dailyblogtips.com/43-web-design-mistakes-you-should-avoid/ De quoi améliorer ce pauvre web
Retours la et la sur l'affaire de digg et de la clé 09 F9 11 02 9D 74 E3 5B D8 41 56 C5 63 56 88 C0 (mince, je l'ai dit !). Sans oublier ici bien sur
http://browsershots.org/ Pour tester son design sur de nombreux navigateurs
http://www.codinghorror.com/blog/archives/000855.html De nombreuses citations plus ou moins marrantes et souvent vraies sur les programmeurs
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ à lire avec http://ventureskills.wordpress.com/2007/05/09/top-5-css-layout-tips/
http://jokke.dk/2007/03/optimizing_php_through_habits quelques conseils en php pour finir

Voila de quoi faire en attendant le prochain billet (qui sera peut-être un vrai article avec du texte, qui sait !)

Update :
Un nouveau lien sur l'effet digg : http://pisani.blog.lemonde.fr/2007/05/14/la-rebellion-digg-les-faits/

Links for 2007-04-19

Jean-Philippe — Thu, 19 Apr 2007 21:13:00 +0200

Une grande personne célèbre (ou pas, en fait je ne m'en rappelle pas) a dit un jour : "Peut-on créer sans copier ?"
Il n'y a toujours pas de réponses certaines à cette question mais quoi qu'il en soit, voila quelques liens toujours plus inintéressants.

http://biologeek.com/journal/index.php/le-guide-complet-du-debutant-freelance
http://freelanceswitch.com/general/101-essential-freelancing-resources/ Très bon site que freelanceswitch.com (Les gens qui suivent auront remarqué que c'est de la que provient le texte de biologeek lié plus haut)
http://www.schillmania.com/projects/soundmanager2/ Une nouvelle version (stable) pour Soundmanager2 que vous verrez bientôt à l'oeuvre dans des conditions réelles
http://www.uncov.com/2007/4/12/youos-youhave-to-be-kidding-me Un grand trolleur que ce monsieur... à voir également son billet sur meebo !
http://www.smashingmagazine.com/2007/04/12/best-of-march-2007/ Un énorme tas de ressources plus ou moins inintéressantes pour les web programmers et web designers.
http://jarrodspillers.com/articles/2007/04/10/custom-image-form-submit-buttons-what-is-the-correct-approach Tout est dans le titre (j'adore quand tout est dans le titre !)
http://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/ Pareil
http://www.codinghorror.com/blog/archives/000836.html Petit tour des mauvaises pratiques des sites web
http://www.hunlock.com/blogs/Mastering_JSON_(_JavaScript_Object_Notation_) JSON est à la mode, voila de quoi vous aider si vous êtes un peu perdu avec cet eventuel futur remplacant de XML !
http://designinginterfaces.com/Introduction Quelques bons conseils à glaner ici
http://www.communitymx.com/content/article.cfm?cid=8B4E6 4 petits conseils idiots mais à ne pas oublier sur le debugguage (comment écrire cet affreux anglicisme ?) de vos CSS.

Et bah, voila !
J'ajouterai que le module d'édition WYSIWYG de Dotclear 2 est très agréable et me permet de blogguer une liste de liens avec encore plus d'efficacité, pour le plus grand bonheur de mr_prout !