blog ntic de revolunet

Le point sur ExtJs 4

Ca fait deja quelques années qu’ExtJS fait le bonheur des développeurs d’applications web complexes. Depuis sa premiere version ce framework javascript a su tirer le meilleur de nos browsers web, permettant à ses utilisateurs le développement d’interfaces riches, robustes et évolutives. Pour ceux qui ne connaissent pas encore cette technologie, je vous invite à aller jeter un oeil au site de Sencha qui présente parfaitement les différents produits réalisés par cette companie.

Aujourd’hui la version 4 d’ExtJS est disponible, stable et remplie de nouveautés faisant toute la différence avec la version 3 qui était deja tres appréciées des codeurs de webapps.

Chez REVOLUNET ça fait deja quelques mois que nous utilisons cette version et il est temps pour nous de vous faire un petit retour d’expérience.

SO WHAT’S NEW ?

Les nouveautés implémentées dans ExtJS 4 sont nombreuses, nous n’allons pas les lister ici mais simplement parler de ce qui nous parait comme une avancée notable par rapport aux versions précédentes.

1) The MVC model
Le but d’architecturer sont code selon le modèle MVC est une avancée importante. Auparavant le code métier (controlleurs) etait souvent mélangé avec la description de l’interface et des données (views and models), les actions concernant les éléments du design étant déclarées au meme niveau que les attributs influants sur l’affichage.

Exemple avec ExtJS 3 : un bouton et sa fonction s’exécutant lors du clic.

Bien sûr cette facon de déclarer un bouton dans ExtJS 4 est encore valide mais lors du développement d’interfaces complexes cette méthode peut s’avérer assez inefficace. Imaginons que notre bouton soit perdu au milieu de l’imbrication de plusieurs widgets et que le clic sur ce dernier doit déclencher différentes actions un peu partout dans l’application. Et bien notre seule facon de faire les choses proprement était de déclencher des évenement personnalisés et de les relayer “à la main” (bubble, cascade, relayEvent…) pour qu’ils soient pris en compte dans les autres éléments de l’interface.

Désormais ExtJS 4 nous propose une alternative à cette architecture que nous avions l’habitude d’avoir avec ExtJS 3. Il suffit pour cela de séparer les deux codes, la déclaration de notre bouton dans une “vue” et les actions le concernant dans un “controlleur”.

Exemple avec ExtJS 4 :

myView.js

myControlleur.js

Dans cet exemple on peut voir l’utilisation du nouveau concept de “ComponentQuery” qui a la maniere des selecteurs CSS permet d’obtenir une référence à n’importe quel composant de notre interface. Ici ‘viewport button[action=submit_a_form]‘ signifie “le bouton du viewport qui comporte un attribut action égal à submit_a_form”.
Il suffit ensuite d’associer les évènements a notre bouton sans ce soucier des son imbrication dans les widgets de notre application. Cerise sur le gateau grace à cette technique, les évènement peuvent etre déclarés avant que les widgets (ici notre bouton) n’aient été “render”.
Si un nouveau bouton faisant parti de notre viewport et ayant un attribut action égal à submit_a_form est créé il repondra au meme fonctionnement, meme s’il n’est pas rendu au load initial de l’application.

Dans cet exemple on peut aussi apprécier l’utilisation de Ext.create qui évite d’avoir un code truffé de “new Ext.Button” qui étaient interprétés au run time. Cela a pour effet d’accélérer grandement le chargement de l’application.

2) Ext.loader

Ce n’est pas à proprement dit une nouveauté d’ExtJS 4 car cette fonctionnalité existait deja en partie dans la version 3 du framework. Disons simplement que le load dynamique des ressources de votre application est désormais induite pour peu qu’on en ai envie.

Si nous reprenons les projets que nous avons développer chez REVOLUNET avec ExtJS 3, on peut voir des fichiers “index.html” démesurément grands car ils comportent toutes les inclusions des differents scripts necessaires au bon fonctionnement de l’application, meme si ces resources ne sont pas utilisées au load de la page.

Aujourd’hui la donne a changée, ExtJS se chargeant d’aller chercher les ressources nécessaires au fur et a mesure de leur utilisation. Ceci comporte deux avantages a nos yeux, le premier etant de ne plus se soucier de savoir si les bons fichiers sont inclus dans l’index, le deuxième est que cette technique nous force a organiser notre projet d’un facon bien spécifique afin qu’ExtJS soit en mesure de trouver le code qu’il souhaite charger quand il le juge necessaire.

Afin de bien comprendre le fonctionnement du chargement dynamique de vos scripts nous vous invitons à lire cet article: http://www.sencha.com/blog/using-ext-loader-for-your-application

SO WHAT’S THE POINT ?

Il aurait beaucoup de choses a dire sur la nouvelle version d’ExtJS 4, la gestion des données, la configuration des objets complexes comme les grids ou les forms, les améliorations de performances… les avancées apportées par le nouvelles version de ce framework sont nombreuses.

En ce qui nous concerne il est évident qu’ExtJS a fait un réel bon en avant avec la sortie de la version 4. Concrètement notre point de vue de développeurs spécialisés dans les applications web est qu’ExtJS 4 va nous faire gagner un temps precieux lors du développement de nos nouveaux projets. Et ca, ca vaut de l’or

De plus, de nombreuses améliorations ont également été portées dans Sencha Touch 2 (gestion des classes, loader…), ce qui nous permet de capitaliser en compétence sur les projets basés sur les frameworks Sencha, que ce soit pour les applis Desktop, ou mobiles.

N’hésitez pas à nous consulter pour vos besoins en développement d’applications web riches.

Revolunet réalise l’application de E-coffrefort.fr

E-coffrefort.fr est, comme son nom l’indique, un coffre-fort virtuel via lequel vous pouvez sécuriser, organiser et gérer tous vos documents papier et numériques !
C’est le coffre-fort N°01 depuis 2006 des particuliers et des entreprises.

Revolunet a permis à ce service de se développer sur mobile via une application compatible iPad, Android et BlackBerry !

Découvrez l’application E-Coffrefort.fr sur iTunes Store

Technologies : Php, Sencha Touch, MySQL, Linux Debian

Revolunet réalise le magazine digital BellesDemeures.com

Toute l’équipe a travaillé pour mettre en place une application mobile compatible iPad, Android et BlackBerry qui permet de consulter le magazine BellesDemeures.com directement depuis sa tablette.

Vous pouvez y consulter les dernières parutions à la manière d’un magazine, découvrir l’actualité, rechercher par région ou département, visualiser des diaporamas de photos en haute résolution…

L’application est accessible directement via le site internet, l’AppleStore, l’Android Market ou BlackBerry AppWorld.

Découvrez le magazine digital sur iTunes Store.

Technologies : Php, Sencha Touch, MySQL, Linux Debian

A la recherche d’un consultant ExtJs ?

Recrute développeur PHP

Nous recherchons pour l’un de nos clients, société spécialisée en développement d’applications web de nouvelle génération (interfaces riches), deux développeurs PHP expérimentés.

Vous intégrerez une équipe d’une quinzaine de développeurs dans le quartier de l’Opéra à Paris.

Salaire à négocier + Primes.

Nous envoyer votre CV et quelques mots sur vos compétences et motivations sur contact@revolunet.com

Django internationalisation made easy with i18n

Ok so now you have your new django based killer app you’d like to translate it into several languages. Here’s a quick memo to get all this running quickly.

Django provides all the tools you need to do this effectively. You can use simple string translations or create more advanced rules with various plurals forms, variable interpolations…

First, be sure to use UTF-8 encode anywhere in your project :

• Save your file as UTF-8 (check your text editor)
• Declare python files encoding with this at the top of each python file (see PEP 263) :
  # -*- encoding: UTF-8 -*-
• Define your strings as unicode if needed
• Be warned : mixing encodings and charsets in a project can cause hasardous/mystical issues then massive headaches

Django provides several builtin tools to help you internationalise :

• makemessages command : scan your code to extract definition and create a .po file
• compilemessages command : compile your translations in the .po files to .mo
• django.middleware.locale.LocaleMiddleWare : Autodetect user language (from browser) or use session defined language (or fallback to project default)
• django.core.context_processors.i18n: add LANGUAGE_CODE and LANGUAGES variables to your templates
• django.conf.urls.i18n : a view that accepts a language POST parameter to change session language
• django.views.i18n.javascript_catalog : provides a javascript array with the translations and helpers functions gettext…

So lets internationalise our project :

Django make it easier to work with app level localisations and not project-global files.
So you must create a ‘locale’ subfolder for each app you want to localize.
Create a ‘fr’ and ‘en’ folder inside each ‘locale’ folder. (or more if needed)
Try first to translate a first app in a second language before going on.

Activate django.middleware.locale.LocaleMiddleWare and tweak your settings.py :

# -*- encoding: UTF-8 -*-

TIME_ZONE = 'Europe/Paris'
LANGUAGE_CODE = 'fr-FR'
USE_I18N = True

# see http://code.djangoproject.com/browser/django/trunk/django/conf/global_settings.py
gettext = lambda s: s
LANGUAGES = (
('fr', gettext(u'French')),
('en', gettext('English')),
)

MIDDLEWARE_CLASSES = (
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.locale.LocaleMiddleware',
'django.middleware.common.CommonMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
)

TEMPLATE_CONTEXT_PROCESSORS = (
"django.core.context_processors.auth",
"django.core.context_processors.debug",
"django.core.context_processors.i18n",
"django.core.context_processors.media",
"django.core.context_processors.debug",
)

Add a lang toolbar to your template and connect to the django.conf.urls.i18n view :

Add a simple lang bar to your base template :

   {% load i18n %}
    <div id='langbar' style='text-align:right;padding-top:5px;'>
        <form name='langform' style='margin:0px;display:inline;width:200px' action='/i18n/setlang/' method='POST'>
            {% for LANG in LANGUAGES  %}
                <img src='{{ MEDIA_URL }}img/flags/{{ LANG.0 }}.png' title="{% trans LANG.1 %}" style='margin:5px;cursor:pointer' onclick="document.langform.language.value='{{ LANG.0 }}';document.langform.submit();">
            {% endfor %}
            <input name='language' type=hidden value="{{ LANGUAGE_CODE }}">
            current LANG : {{ LANGUAGE_CODE }}
        </form>
    </div>

As you can see, when you enable i18n context processor, your templates can acces new variables like LANGUAGE_CODE or LANGUAGES

Now add the /i18n/setlang/ view in your urls.py.
This view accepts language POST parameter then redirect user to REFERER page (or one designed with ?next GET parameter). Selected language is then kept in session.

urlpatterns += patterns('',
    (r'^i18n/', include('django.conf.urls.i18n')),
)

Now, check if when you submit the form, the selected language is kept in session. If not check your database (need the session table), restart your dev server or enable settings.DEBUG

If you can submit your lang and LANGUAGE_CODE is kept in session, bravo, your django is multilingual ready.

Internationalise your code

In your templates : just load i18n then replace every string with a trans tag

{% load i18n %}
<div class="main">{% trans "Welcome to our new website" %}></div>
{% block contents %}<img src="/img/intro-{{ LANGUAGE_CODE }}"/>{% trans "This is the intro" %}{% block %}

In your views : just import django.utils.translation.gettext then replace every string with gettext(thestring)

from django.utils.translation import gettext as _ # just a shortcut
def view(request):
    hello = _('Hello, World')
    return HttpResponse('<b>%s</b>' % hello)

Now each time you run the makemessages command for this app, it will detect these string and update this app django.po files accordingly.

Generate the .po, traduct then compile to .mo

1. From this app folder, run

   python ../manage.py makemessages --all

   This will scan this app .py and .html files for gettext/trans calls and generate or update a django.po file for each lang.

2. Now you can edit (manually) this old-fashionned-style .po file with your favorite  text editor.
   If your site default is English, edit app/locale/fr/LC_MESSAGES/django.po (and djangojs.po if needed)
3. Once all your strings are translated, run

   python ../manage.py compilemessages

   from the app root. This will generate .mo files from the .po

Now your templates and views should be automagically translated.

run makemessages/compilemessages commands to update the .po and .mo when you change some code. restart the web server.

Javascript internationalisation

Now your templates and views are correctly translated, you may also need to internationalise jour javascript files.

Django provide a simple solution that you can use in your projects

• the makemessages command takes a -d djangojs parameter to parse .js files and create a djangojs.po
• The django.views.i18n.javascript_catalog provides a way to acces the .po files from javascript
• This view serves a javascript file containing a ‘catalog’ array with translations and utilities functions such as gettext

Activate the view in your urls.py :

I tweaked the official rule a bit.

# urls.py
def jsi18n(request, packages = None, domain = None):
    if not domain:
        domain = 'djangojs'
    from django.views.i18n import javascript_catalog
    return javascript_catalog(request, domain, packages)

urlpatterns += patterns('',
    (r'^jsi18n/?(?P<packages>[^/]+)?/?(?P<domain>[^/]+)?/?$', jsi18n ),                                          # serves the javascript data
)

Add a javascript include in your template ( be sure to include it before any other javascript localised file) :

	<script type="text/javascript" src="/jsi18n/main/djangojs"></script>

This url will serves you a javascript file from project/main/locale/fr/LC_MESSAGES/djangojs.po (if user lang is fr)

By default, this language definition returns the user LANGUAGE_CODE but you can override using ?language GET parameter

Now you just need to replace each string in your javascript files with a call to gettext.

alert( gettext("Ready to start ?") );

Maintain

When you add new code, always use calls to gettext instead of strings.
run makemessages to update the .po definitions
translate new strings in the .po files
run compilemessages to update

Voila Now your app can speak any UTF-8 lang, which is more than 600 languages

These are just the basics, check out for the full story http://docs.djangoproject.com/en/dev/topics/i18n/internationalization/

Notes/Gotchas :

• Using builtin dev server, you need to restart after a compilemessages
• Use famfamfam flag icons
• You must add your app to settings.INSTALLED_APPS if you want to use jsi18n view for this app
• Double check middlewares order, and session tables

Astuces Django

Suite à mon quickstart Django, me revoici avec quelques astuces pour continuer.

Pour tester/développer avec Django, je rappelle qu’il vaut mieux utiliser le serveur de dev intégré, puis passer à Apache, nginx ou autre pour la production par la suite.

Il est important de lire pour commencer les principes de la philosophie Django ainsi que le ‘django coding style’

Ne hardcodez pas vos paths

• dans votre settings.py :
• BASE_DIR = os.path.dirname(__file__)
• utilisez ensuite os.path.join avec settings.BASE_DIR ailleurs si besoin
• Pour importer les settings de votre projet, utilisez toujours
  from django.conf import settings

Utilisez un fichier local_settings.py

• Créez un fichier local_settings.py qui contiendra uniquement les settings relatifs au déploiment de votre application : settings de base de données, smtp, debug… Vous n’aurez plus que celui la à modifier pour un nouveau déploiement.

Mettre en production avec Apache

• Pour une installation classique avec Apache, utilisez de préférence mod_wsgi. N’utilisez pas le serveur de dev intégré en production!

Debug AJAX plus pratique

• Si vous faites de l’Ajax, utilisez Firebug et le middleware AJAXSimpleExceptionResponse

Queysets : filters et excludes dynamiques

• Utilisez les dictionnaires pour filtrer dynamiquement vos querysets :

Créez des applications modulaires

• Placez vos app dans un sous dossier ‘apps’
• Utiliser des objets génériques : le ContentType framework

Utilisez un script pour mettre à jour vos modèles

• Django ne gérant pas nativement les ALTER sur votre base de données, vous devez sauvegarder (manage.py dumpdata), reset votre base (manage.py reset) puis recréer votre base (manage.py syncdb) et recharger les données (manage.py loaddata).
• Utilisez plutot un script qui automatisera cette tache

Utilisez des décorateurs dans vos vues

• @login_required pour restreindre la vue aux utilisateurs loggés
• @user_passes_test(lambda u: u.has_perm(’polls.can_vote’)) pour restreindre la vue selon un test particulier
• créez vos propres décorateurs

Ne définissez qu’une fois vos urls

• Utilisez les named-urls pour ne plus harcoder vos urls
  • Dans urls.py :  
    (r’^articles/list/(\d)+’, apps.main.list, name=”list-view”)
  • Dans une vue :
    return HttpResponseRedirect(reverse(’list-view’, args=[2007]))
  • Dans un template :
    <a href=”{% url list-view 2007 %}”>ma vue</a>
• Utilisez get_absolute_url() sur vos modèles pour affecter une url à chacun de vos objets

Des questions que vous vous posez surement :

• La différence entre null et blank dans vos modèles
• Comment toujours passer des variables à mes templates : les template contexts

De bons examples de coding-styles :

• http://code.google.com/p/django-basic-apps/
• http://groups.google.com/group/django-hotclub

Différents cas de figures sur les formulaires Django : http://uswaretech.com/blog/2010/01/doing-things-with-django-forms/

Bien démarrer avec django

Cela fait maintenant presque deux ans que j’utilise intensivement le framework Django pour toutes mes applications web, et j’ai enfin réuni assez d’éléments pour pouvoir vous livrer un petit ‘QuickStart’ qui vous permettra de démarrer rapidement.

Contrairement à d’autres frameworks web, Django n’est pas orienté CMS ou HTML. Vous pouvez tout autant créer un site HTML/Ajax, une API RESTFUL http ou une application en ligne de commande.

Django permet de coder toute la partie serveur de votre application, mais pour la partie ‘client’, c.a.d. le HTML par exemple, vous devrez vous débrouiller tout seul ou utiliser un autre framework, jQuery par exemple, ou ExtJs.

Pourquoi Django ?

Open Source
Portable
Langage Python
Prototypage rapide
Evolutivité
Abstration ORM
Supporté par Google AppEngine (avec restrictions)
Excellente documentation

Fonctionnalités principales :

• ORM : permet une abstraction de la base de données et du SQL, ce qui fait que vos applications peuvent tourner sur : SQLlite, MySQL, SQLserver, Oracle, PostGres…
• Admin automatique : une fois vos modèles définis, ils sont de suite accessible dans l’interface d’admin automatique, et vous pouvez toute de suite créer objets
• Templates : une gestion des templates très poussée, avec gestion des héritages, des filtres et ‘customs tags’.
• Shell intégré : Tout votre code est également accessible directement depuis un shell intégré
• Gestion des utilisateurs : Toute la partie utilisateurs, comptes, login, sécurité et permissions est déjà disponible sans efforts

Inconvénients :

• Peu d’hébergeurs mais cela évolue : http://code.djangoproject.com/wiki/DjangoFriendlyWebHosts
• C’est surtout  un avantage, mais le projet évoluant très vite, vous devrez coder avec et pour une version spécifique de Django. Et vous ne mettrez à jour django pour tel projet seulement après avoir consulté cette page : http://code.djangoproject.com/wiki/BackwardsIncompatibleChanges

A noter que Django est une librairie python, vous pouvez n’utiliser que les fonctions dont vous avez besoin, même en ’standalone’  (hors du web).  Et vous pouvez tout modifier, étendre et améliorer à souhait.

La première chose à faire avant de se lancer dans Django est déjà de connaitre un minimum le langage python et sa ‘magie’. Le livre ‘Think like a computer scientist‘ est à lire, Instant Python pour les préssés, et “A byte of python” (en francais).

C’est parti

Installez python (2.5 ou 2.6) sur votre machine, et récupérez la dernière version de Django. Le repertoire ‘django’ de cette archive doit se trouver dans le dossier ‘lib/site-packages’ de votre installation de Python. Si vous souhaitez utiliser MySQL comme serveur, installez python-mysqldb. Sinon, SQLlite fera très bien l’affaire pour démarrer !

Pour tester si votre installation de python/django est correcte :

Si vous avez une erreur lors de l’import, alors votre dossier ‘django’ n’est pas dans votre dossier python\lib\site-packages, vérifiez.

Si l’install est correcte, alors vous pouvez créer votre premier projet django.

Exemple sur windows :

Ouvrez un shell, et placez vous dans votre dossier de travail, puis lancez la commande django-admin.py startproject

Un dossier ‘projet1′ a été crée et contient les fichier de base :

• settings.py : configuration du projt, base de données, emails…
• urls.py : la configuration des urls de votre projet
• manage.py : la commande qui permet de lancer le serveur, mettre a jour les bases et effectuer des opérations de maintenance.
• __init__.py : ce fichier permet simplement à Python d’interpréter le dossier en tant que ‘module’

Pour développer un projet Django, utilisez le ’serveur de dev’ intégré (commande manage.py runserver), mais pour la production, vous devrez mettre en place Apache+WSGI, Nginx ou un autre serveur.

Lancez le serveur pour vérifier que votre projet est bien crée :

Maintenant vous pouvez ouvrir votre browser à cette adresse : http://127.0.0.1:8000/

Modifiez le fichier settings.py, puis suivez le premier tutorial pour commencer à faire joujou.

Je reviens prochainement  pour la suite.

rsync alternative for low cpus

I had to transfer some +500Gb of data from an NTFS drive, using my QNAP TS409 PRO Nas external USB connector.

Using the integrated “hot copy button” or a simple rsync between the two drives, i only reached 2.5mb/s which is a pitty. In fact its the Qnap Cpu which is a pitty. (yes rsync is cpu consuming)

So inspired from http://discuss.joelonsoftware.com/default.asp?design.4.528600.11 i wrote a simple bash script to recursively copy a directory tree, but using cp instead of rsync. I can now reach 6.5mb/s which is 3 times faster.

So here it is : http://www.revolunet.com/static/download/labo/mysync.sh

Fin de la passerelle MSN de jabber.fr

A mon grand regret, les admins de jabber.fr ont décidé de mettre fin aux services des passerelles propriétaires sur le serveur jabber.fr.  Cela concerne bien sur MSN, mais aussi ICQ et AIM.

Cette décision, surtout politique, va obliger tous ceux qui ont migré sur jabber à changer de client (pour un client multi-protocoles) ou à s’inscrire sur une autre passerelle.

Si comme moi vous êtes un fan de PSI , vous pouvez tout de même utiliser d’autres passerelles, comme par exemple celle de jabber.gnubox.net tout en gardant votre compte jabber actuel. 

La passerelle MSN aura en tous cas rendu de bons et loyaux services pendant plusieurs années, meme s’il fallait la relancer 1 à 2 fois par semaine, ce qui est tout de meme toujours mieux que de faire tourner Live Messenger.

AMEN

WPF MediaElement + ASX workaround

This i my first English post so sorry for the poor english, and feel free to correct me

I recently had to develop a multimedia XAML application  that plays Asx playlists with customs overlays and i faced to differents annoying, unresolved problems related to the MediaElement ASX handling. I discovered that the MediaElement behaves very differently with medias played within an Asx and the same medias played direclty.

My four main problems were  :

• The MediaElement keeps the first Asx item aspect radio for the whole Asx. (cannot mix 4:3 and 16:9 medias)
• If you add some still images in the Asx (jpeg), you cannot add animated overlays over it, because the animated items leave ugly black trails over the image… 
• The MediaElement doesnt play correctly WMV files inside an Asx. It stops before the end, and the Audio is a little bit desynchronised.
• Maybe related to my last wmv playback problem, sometimes, even with <REPEAT> tags in the Asx, the MediaElement stops during a video.

It took weeks to track and identify these problems…but if you test outside an Asx, all the problems go away, So its clearly related to MediaElement Asx handling. Problem is that MediaElement control is actually very limited.

So i finally decide to create a small AsxController class that simply parse an Asx file and control a specified MediaElement object. Its simple and it works like a charm. Supported Asx items are streams uri, files, but also still images with a specified duration. 

Its written in VB.NET but you can easily translate it to C# or something else. It should be compatible with Silverlight.

Grab the source and example code here (rename to .vb) : AsxController.vb

Enjoy !

WordPress hacked & spam injections

Les spammers n’ont décidément plus de limite dans leur imagination C’est ce que j’ai découvert en éditant un de mes articles sur ce blog. En regardant de près le code d’un de mes posts, je me suis rendu compte qu’a la fin du post, il y avait du spam ajouté en toute discretion…

Le spammer comence par injecter quelques tags :

puis insère une div cachée, non visible dans un navigateur :

puis insère tout un tas de liens sur le vi4gr4 et compagnie… Ceci est possible grâce à l’exploitation d’une faille de sécurité dans WordPress, qui permet au hacker de se créer facilement un compte administrateur. Cette faille a depuis été corrigée d’ou l’importance de toujours bien mettre à jour wordpress et tout logiciel en général.

Si en plus le serveur est mal configuré, le hacker peut alors prendre le controle total de la machine en uploadant le parfait kit du pirate PHP. Un outil de crackage a apparemment été développé pour automatiser la tache, polluer  à la chaine des milliers de blogs, certainement pour longtemps, et ainsi gonfler au maximum la popularité des sites cibles aux yeux des moteurs de recherche.

L’origine de l’attaque provient apparemment de Pologne et Russie. Le resultat de cette attaque a engendré un blacklistage de l’index de google et j’ai donc crée un script Python qui répare les dégats en supprimant les spams :

Attention à bien sauvegarder votre base de données avant d’executer ce script ! Si vous ne comprennez pas le script, ne l’executez pas !

J’attends impatiemment le retour du traffic si google veut bien me réindexer !

EDIT :Deux jours après application du script + demande de réexamen dans Google webmaster tools le traffic est revenu à la normale…

Mise à jour de VLCcontrols

VLCcontrols est une librairie Javascript qui vous permet d’intégrer le fameux lecteur VLC dans vos pages web et de profiter de toute sa puissance. De nouvelles fonctions ont été ajoutées : possibilité d’intégrer des sous titres (locaux ou distants), de transcoder/streamer ou enregistrer le flux en cours de lecture sur votre disque dur, tout cela depuis une page web.

VLCcontrols is javascript library that allows you to embed the powerful VLC plugin in any webpage; New features have beed added today : you can now embed subtitles (local or remote), transcode and save or stream your contents as if you were in VLC, but from your webpage.

VLCcontrols home : http://code.revolunet.com/VLCcontrols

VLCcontrols advanced features demo : http://code.revolunet.com/VLCcontrols/VLCcontrols/advanced.html

Google AppEngine revolutionne le développement web

Durant ces 10 dernières années, Google a révolutionné la recherche, le e-marketing, la cartographie et bien d’autres services à destination des usagers. Depuis quelques temps, Google s’est aussi investit dans l’open source, notamment grâce à code.google.com qui propose de nombreuses librairies open source pour les développeurs, ainsi que des espaces gratuits de gestion de projets a la sourceforge.

Aujourd’hui, Google lance Google AppEngine, un service à destination des développeurs web, qui va leur faciliter grandement le développement d’applications web, en leur permettant de se concentrer sur la partie la plus fun de leur metier : le code lui-même. Et tout cela gratuitement (pour l’instant).

Google AppEngine est en effet un framework qui permet d’écrire très facilement des applications en Python, sans se soucier ni de la base de données, ni de l’hebergement, ni de l’administration système, ni des sauvegardes. Pour ceux qui ne connaissent pas bien Python c’est un langage très haut niveau, très lisible, très logique, et très performant; Google l’utilise à de nombreux niveaux de son architecture et a d’ailleurs embauché son créateur le fameux Guido Von Rossum en 2005. Concrètement, vous définissez vos modèles de données, vos templates graphiques et votre code métier (facon MVC), puis publiez très simplement votre projet directement sur la plate forme Google. Vous avez alors la puissance de Google entre vos doigts, et disposez d’une extraordinaire flexibilité et extensibilité de votre application, le tout de facon 100% transparente. Votre application est hebergée chez Google, et vos données reparties sur de nombreux serveurs à travers le monde ce qui vous garantit une haute disponibilité et de hautes performances quel que soit le volume de vos données et le traffic que vous générez.

Techniquement, Google vous propose un SDK (dispo sur Windows, Mac, Linux) qui vous installe un environnement de développement similaire à la version en ligne de AppEngine . Ce framework est open source et basé sur le célèbre framework web en python Django (Templates, DataModels…), Webob (Modele objet request/response) et sur plusieurs API fournies par Google pour nous faciliter la vie : Datastore API pour la base de données (basé sur la technologie BigTable de Google), Users API pour la gestion des utilisateurs et autres joyeusetés… Bien sûr vous pouvez ajouter toutes les librairies Python que vous souhaitez à votre projet.

Ce service n’est pas destiné aux applications professionnelles car vous êtes trop dépendant de Google et n’avez aucun contrôle sur de nombreux points (notamment la base de données ou les librairies bas niveau disponibles) mais ce service va certainement faciliter le développement de nombreuses applications web, sociales (ou pas), web 2.0 (ou pas). Ma grand mere va peut etre enfin pouvoir coder l’application web de bridge dont elle rève depuis toujours et que je n’ai jamais eu le temps de faire pour son Noël ;)

Le service est encore en beta, pas encore ouvert au quidam pendant une phase de tests de plusieurs mois mais on peut d’ores et deja installer le SDK et tester la plateforme en local pour faire joujou. Et on s’amuse. A terme Google proposera surement à la maniere d’Amazon S3 de la location de ressources si vous avez besoin de plus de ressources que ce qui vous est offert.

Démonstrations videos : http://youtube.com/watch?v=tcbpTQXNwac

Le SDK : http://code.google.com/appengine/downloads.html

La Documentation : http://code.google.com/appengine/docs/

Le groupe de discussion : http://groups.google.com/group/google-appengine?lnk=sg

VLC 0.8.6e est sorti

Une nouvelle version de VLC est disponible sur le site de videolan.org.

Cette mise a jour corrige plusieurs failles de sécurité importantes, et corrige également des bugs dans l’encodage h264. Vous allez donc enfin pouvoir encoder en mpeg-4 sous windows pour, entre autre, votre iPhone

Le changelog complet ici : http://trac.videolan.org/vlc/browser/tags/0.8.6e/NEWS

Mettez vite a jour pour éviter tout probleme de sécurité. Merci à la team VLC !

VLCobject, VLC dans votre page web

Je viens de publier une petite librairie javascript largement inspirée de swfobject et qui vous permet d’intégrer facilement le  plugin VLC dans vos pages WEB. Le plugin est chargé en pur javascript et si l’utilisateur n’a pas de plugin VLC installé, un message lui indiquant un lien de téléchargement lui est indiqué.

Ca s’appelle VLCobject et c’est dispo ici : http://code.revolunet.com/VLCobject/FR

Pour ajouter les boutons Play, Pause, Stop, Volume, Seekbar… regardez du coté de la librairie VLCcontrols

Insérez VLC dans vos pages WEB !

Tout le monde connait la puissance de VLC, le célebre lecteur multimédia développé à l’origine grâce à un projet de l’école Centrale, puis offert au monde open-source et qui permet de lire pratiquement tous les formats videos. Aujourdhui, VLC est devenu un projet international, qui rassemble une grosse communauté et est supporté par de nombreuses entreprises dont Free qui a basé beaucoup de ses services sur ce petit bijou et a aussi largement contribué à son développement.

Mais VLC, plus qu’un ’simple’ lecteur, est aussi une véritable plate forme multimédia de réencodage et de diffusion, qui permet de transformer et de diffuser des flux audios ou videos de multiples facons. Par exemple, grace à VLC, vous pouvez capturer le flux de votre webcam ou de votre tuner TV et le diffuser sur Internet, en format MPEG2 par exemple, ou meme h264 ou Flash (FLV) si votre processeur (et porte monnaie) le permet. Vous pouvez également ajouter des filtres, sous titres et appliquer si vous le souhaitez des transformations aux images…

Depuis peu, il est également possible d’intégrer directement le player VLC dans des pages web, à l’instar d’autres players comme WindowsMediaPlayer par exemple, ce grâce à l’équipe de VLC, qui a travaillé dur pour créer un ActiveX (pour Internet Explorer) et un plugin pour Mozilla, lesquels disposent desormais d’une nouvelles API unifiée, qui permet de les controler facilement en Javascript. Nous allons maintenant pouvoir intégrer le player VLC directement dans des pages web, et exploiter toutes ces possibilités : lecture haute definition, mais aussi sous titrage, réencodage, enregistrement, diffusion…

Pour profiter de ces possibilités, vous devez installer au moins un des deux plugins pour votre navigateur. Pour ce faire, il suffit de cocher ces options pendant l’installation de VLC.

Je viens de développer une petite librairie Javascript qui permet à n’importe quel webmaster d’insérer facilement le lecteur VLC dans ses pages web, en ajoutant en plus quelques boutons de controle : play, stop, volume, seekbar… vous pouvez trouver cette lib sur http://code.revolunet.com 

autre exemple plus complet : http://vlc.revolunet.com

J’espere que cela permettra une diffusion plus large de ce merveilleux plugin !

Attention, installez plutot la verison 0.8.6d (derniere stable) plutot que la 0.8.6c qui souffre d’une serieuse vulnérabilité au niveau sécurité !

Le site de VLC : http://www.videolan.org

Le forum : http://forum.videolan.org

et le wiki de plus en plus complet : http://wiki.videolan.org

J’attends vos feedbacks, merci

EDIT : Cette a été remplacée par VLCcontrols : http://code.revolunet.com/VLCcontrols

gcomment.com, le widget gratuit pour la gestion de commentaires.

Découvrez le nouveau service lancé par l’equipe de revolunet en version béta !

gcomment.com permet d’insérer une zone de commentaires customisable sur les pages de votre site sans taper la moindre ligne de code.

Echangez avec vos visiteurs ou donnez leur la possibilité de laisser un avis !

Le service est 100% gratuit et l’inscription ouverte à tous. Nous attendons avec impatience vos commentaires et suggestions pour en faire un service ultime !!

check it out ! http://www.gcomment.com

Mini Freeplayer

J’ai crée un simple script batch qui permet de lire très facilement une video sur son televiseur, grace au systeme ‘Freeplayer’ de la Freebox. Il suffit de glisser une video sur ce script pour la lancer sur votre TV.

Le script s’occupe de lancer VLC avec les bons parametres, et de créer une page sur votre disque pour la Freebox. Cette page affiche simplement la vidéo en plein écran.

Pour que cela fonctionne, il faut :

• Que dans la gestion de votre compte Free (free.fr), vous ayez configuré l’adresse IP de la machine ou sera installé ce script. (je vous conseille d’affecter à cette machine une IP fixe, en utilisant son adresse MAC, que vous pouvez trouver en tapant ipconfig /all dans une fenetre MSDOS)
• Que l’éventuel firewall sur cette machine ai le port 8080 ouvert pour que la freebox puisse accéder à la page settings.html (générée par le script)
• Que vous modifiez éventuellement le chemin de VLC sur votre PC (VLC_PATH) au début du fichier

Voila, c’ets du Quick & Dirty mais ca marche nickel Le seul souci est que les sous titre ne sont pas gérés, mais c’est pour bientot, des que l’un d’entre vous corrige le script De plus c’est un script uniquement pour Windows, désolé les gars mais vous pouvez l’adapter très facilement…

A télécharger ici et à mettre sur votre bureau par exemple : http://code.revolunet.com/MiniFreePlayer/MiniFreePlayer.bat

Commentaires / corrections bienvenues ici même

test du e65, nouvelle bombe de chez Nokia

Cela faisait un moment que je pensais m’offrir le Nokia N80 ou le N95 mais c’etait sans compter la sortie récente du E65. Discret et élégant, ce téléphone est techniquement au top de ce qui se fait actuellement, pour un prix, avec abonnement (1 an SFR), de 69 € seulement !!Basé sur l’excellent système d’exploitation Symbian version 9.1 (alors que le N80 utilise une version plus ancienne), le e65 propose nativement le WiFi et la téléphonie SIP, ce qui permet de faire de grosses économies sur sa facture téléphonique (par exemple en passant par son compte Freebox pour appeller).

La navigation est rapide, on peut surfer sur Internet en WiFi, streamer des flux Audio et Video (format RealPlayer), lire des mp3 sur sa carte MicroSD, visualiser des PDF, Word, Excel et meme des animations Flash… On peut bien sur recevoir et envoyer des mails (POP et IMAP) via autant de comptes que l’on souhaite. Grace à Google Maps For Mobile, vous pouvez consulter les cartes, images satellite et itinéraires dans le monde entier. Vous pouvez également le connecter à un module GPS Bluetooth externe, ce qui vous permettra d’ajouter toutes les fonctions classiques d’un systeme GPS (sans voix). L’appareil n’est qu’un 2 mégapixels mais bon c’est un smartphone avant tout.

Comme le téléphone tourne sous Symbian, vous pourrez trouver sur Internet une multitude de jeux et programmes gratuits ou pas et les installer très facilement (attention aux paramètres de sécurité). Si vous êtes programmeur ou avez envie de bidouiller, vous pourrez facilement installer le support du fabuleux language Python et la console Python par Bluetooth, une excellente innovation pour les développeurs. En effet, vous pourrez coder directement sur votre mobile depuis votre PC !! Ensuite, vous ferez comme beaucoup de développeurs Symbian, vous mettrez votre code à disposition de la communauté sur http://symbianos.org/ par exemple.

Pour ceux qui sont inscrits au programme de WiFi communautaire FON, un programme permet de gérer automatiquement les connexions aux bornes FON et ainsi de pouvoir téléphoner via SIP et surfer gratuitement dans de nombreux endroits… téléchargez le ici : http://www.fon.com/fr/download. Et si vous n’etes pas encore un Fonero, achetez votre fon sur fr.fon.com ! Il me reste 3 invitations, contactez moi ici si vous en voulez une (20€ TTC) sur contact at revolunet.com

Si vous avez actuellement un Nokia, un outil de synchronisation Bluetooth ou Infrarouge est fourni, qui permet en quelques minutes de synchroniser les données entre vos deux mobiles. Sinon, vous pouvez utiliser le service online Mobical qui se chargera de synchroniser sur deux appareils différents.

Alors n’hésitez plus, technophile ou pas, foncez sur ce superbe appareil qui ne vous decevra surement pas !!

Et si vous avez des astuces à partager ou des questions, n’hesitez pas, les commentaires sont ouverts

Configuration nécessaire pour téléphonie SIP via freephonie :

Suivez le guide pour les nokia e-series à cette adresse (wiki freephonie) : http://www.freephonie.org/doku/tutoriel:seriee mais ne spécifiez PAS de serveur Proxy… Connectez vous à votre point d’accès WiFi, puis dans le menu ‘Connectivité, Téléphonie Internet’, vérifiez que vous êtes bien connecté !

(NB : Nous n’avons pas acces pour l’instant aux points d’accès Freephonie, on peut seulement utiliser des point d’accès pour lesquels nous avons les clés)

EDIT 05/12/07 : Free a activé le telechargement des certificats SIP pour tout telephone dans son interface !!!

des PDF dynamiques facilement

Voici une petite astuce pour générer à la volée des PDF dynamiques du style formulaire à remplir.

Il s’agit de générer des PDF à parti d ‘un modèle source avec des données contenues dans un fichier FDF (Forms Data Format).  Ce contenu, vous le générez dynamiquement comme le souhaitez, en python par exemple et en récupérant les infos d’une base de données.

Dans cette exemple, on créera un simple formulaire pré-rempli à imprimer, mais vous pouvez également créer un formulaire dynamique, que le client pourra remplir à l’écran directement (comme le declaration des impots sur internet) avec du javascript intégré.

1. Préparez votre document PDF avec des champs nommés. Vous pouvez utiliser des textbox, des listbox, des checkbox, radios….
2. Dans votre script qui pourra être appelé depuis une page web, créez un document FDF  puis utilisez l’excellent freeware pdftk pour ‘merger’ le PDF source et les données. Cet outil vous permettra de nombreuses manipulations de pdf : assemblage, extraction de pages, compression…
3. Exemples de fichiers FDF (data.fdf) : http://www.google.com/search?ie=UTF-8&q=filetype%3afdf
4. Script python pour générer le PDF avec pdftk :
   import os
   os.system(”pdftk.exe source.pdf fill_form data.fdf output output.pdf flatten”)

   je rajoute ‘flatten’ pour supprimer les champs dans le pdf final

5. Magie, un PDF pré-rempli est généré

Et voila, avec cette recette, vous pourrez générer de nombreux documents PDF très facilement

associer un protocole a un script sous windows

Dans une page web, il peut etre assez pratique d’associer un script ou un programme externe quand on clique sur un lien avec un protocole spécifique. Par exemple un lien href avec comme valeur callto:0102030405 pourrait me permettre d’executer le dialer de windows en lui demandant de composer un numéro. C’est très pratique en intranet par exemple.

(Notez que dans le href il y a un zéro de plus en prefixe qui me permettra de composer un numéro externe)

Il nous suffit pour cela d’ajouter au registre une petite clé, qui associera le nom de notre ‘protocole’ à un programme (faites un fichier .reg puis executez le)

dial.vbs est un petit script qui permet de parser les arguments (ici le numéro) et de les envoyez à dial.exe, petit utilitaire permettant de composer un numéro envoyé en premier paramètre, technique inspirée de ce post sur le forum de SugarCRM.

Vous pouvez tout autant passer la main à un script Python ou autre qui fera ce que vous lui avez appris a faire avec les arguments. Attention toutefois, le programme sera éxécuté avec les droits de l’utilisateur actuel donc surement pas admin en entreprise…

Et voila, des qu’un utilisateur clique sur un lien callto, le numéro est composé sur le modem. Branchez donc l’entrée modem de votre telephone a votre PC et c’est parti pour une numérotation automatisée depuis votre page web !

Skype a son callto:0102030405, Wengo son wengo:usernick et maintenant nous avons aussi nos propres handlers… Enjoy

recherche stagiaire développement web

Je recherche un étudiant en quête d’un stage ou d’un contrat de professionnalisation (1 an mini) pour m’aider dans la réalisation de nombreux projets. Mon activité étant en plein développement, je cherche une personne en qui investir sur le long terme si tout se passe bien.

Vous êtes passionné d’informatique et de nouvelles technologies, vous avez soif d’apprendre et de comprendre et avez envie de passer à l’action.

profil recherché :

• compétences technos web : PHP/MySQL, Javascript ou autres langages (ASP, Python…), XML/XSL…
• compétences technos réseau : linux, administration…
• polyvalence
• culture web
• curiosité

les missions :

• développement de sites et applications web 
• admin réseau 
• référencement
• …

Le poste sera basé à Montreuil, proche du Metro “Mairie de Montreuil”. 

La rémunération sera basée sur celle de votre convention.

Vous pouvez me contacter directement au 06 62 62 61 02 ou par mail : julien@bouquillon.com

Merci

Aidez Mango, le client Jabber en XUL

Mango, un projet tres prometteur de client Jabber réalisé en XUL, a besoin de développeurs ! En effet, les auteurs sont des étudiants, et ne sont plus disponibles pour ce projet pour cause d’examens et mémoires qui demandent pas mal de travail.

Le code a l’air plutot propre et le soft est déjà assez poussé… bref, une bonne source d’inspiration en XUL pour tous ceux que cela interesse.

J’ai enrolé la team et je vous attends si vous êtes motivé pour plonger dans XUL et essayer d’améliorer ce soft qui est déjà bien avancé.

Ca se passe sur le blog officiel : http://www.mangoproject.org/

PHPdiapo : diaporama PHP/Javascript

J’ai crée un petit script PHP pour générer des diaporamas facilement dans une page.

Le script scanne un dossier et genere le javascript necessaire au diaporama. On peut en placer plusieurs par page et il suffit d’une seule ligne de code pour générer le diaporama :

infos et sources sur https://github.com/revolunet/PHPdiapo, commentaires bienvenus ici même.

enjoy

Passerelle MSN de jabberfr d0wn episode 2

Le serveur de l’APINC qui gère la passerelle MSN, hebergé chez Redbus, est d0wn depuis hier soir.

Malheureusement, il ne reboote pas, et seule une intervention physique pourra mettre fin au problème.

Comme l’APINC est une association dont les membres ont -aussi- un travail, l’intervention n’aura lieu que Samedi et je remercie d’avance carxwol pour prendre du temps sur son weekend pour retablir les services.

A suivre sur ce blog !

EDIT 13.11.06 : Carxwol & Atmaniak ont mis fin ce weekend  à cette panne grâce à une intervention efficace ! –> http://suivi.apinc.org/index.php/2006/11/13/58-intervention-jabber-passerelle-msn-3e-noeud-web

EDIT 29.11.06 : La machine qui heberge la passerelle est de nouveau tombée ce week end ;( Des admins sont sur le probleme; cf http://jabber.apinc.org/news/?p=18

Firefox 2 Launch Party

J’ai eu la chance d’avoir une invitation pour la soirée de lancement de Firefox 2 qui se déroulait hier soir au siège de la région Ile De France dans le 7ème à Paris, et c’etait une soirée bien sympa. Après le discours de Jean Paul Huchon, qui a vanté les mérites de la fondation Mozilla et de FireFox, Tristan Nitot a remercié toute la communauté : traducteurs, developpeurs, utilisateurs… sans qui la fondation ne serait pas ce qu’elle est aujourd’hui.

Après un petit cirage de pompes en règle, les geeks présents ont ensuite eu droit à un superbe buffet, des t-shirts et badges Mozilla ! On va tous pouvoir faire la promo de Firefox 2 !! Je remercie La région Ile De France et la fondation Mozilla pour m’avoir permis de venir à cette soirée et de rencontrer ou apercevoir de nombreuses personnes de la scene ‘libre’ Francaise : Les XUL-gurus : Paul Rouget, Daniel Glazman, Laurent Jouanneau, le site GeckoZone, l’APRIL, l’APINC, l’equipe de GANDI et de nombreux bloggeurs.  Ce fut une soirée fédératrice et libre, autour d’un projet commun : le partage de l’information.

Python SideBar

Si vous developpez en Python, alors vous devez absolument installer cette sidebar pour FireFox !

Elle liste sous forme d’arbre la reference, la librairie, l’api C, les modules et même le tutorial

Et il y a aussi de quoi lancer une recherche sur notre site préféré : python.org

un must-have ! http://www.edgewall.org/python-sidebar/

de EPS vers JPG en masse

Ayant eu à convertir plusieurs dizaines de EPS en JPEG, voici un petit exemple de ce qu’on peut faire grâce à Linux en 2 lignes de commandes.

1- Je mets mes EPS en vrac dans différents répertoire dans un dossier ./eps puis je convertis tous mes eps en jpg grace à ImageMagick et GhostScript :

2- je récuperes tous les fichiers jpg crées et les mets dans un dossier ./jpg :

Et voila, en quelques minutes, ma machine m’a converti toutes mes images  

NB :

• -density 300 permet d’avoir une résolution de 300dpi (mettre 72 pour le web)
• vous pouvez ajouter -size 300 pour forcer un redimensionnement de toutes les images à 300px de large

> toutes les options de la ligne de commande ici : http://www.imagemagick.org/script/command-line-options.php

démos XUL

George Nava met à disposition sur son site de nombreuses démos d’applications en XUL, et avec le code source !

Il y a des exemples très sympas, dont :

• Un petit diaporama
• Statistiques
• Un éditeur de texte assez complet
• Un éditeur de fichiers XML
• Un webmail complet !
• Un calendrier
• et surtout : un IDE XUL en XUL !! (limité mais très pratique)
• et autres…

tout est la : http://www.georgenava.com/applauncher.php

Et surtout tout le code source est à diposition sur le codex : http://www.georgenava.com/xul/codex/viewer.php

Merci George pour ce don à la communauté XUL !

EDIT : Pour une raison inconnue, le domaine de George est Down depuis plusieurs semaines… Je le contacte pour en savoir plus

YouOS, premier OS en AJAX

Voila, un premier soit-disant système d’exploitation 100% AJAX est sorti; il s’agit de YouOS

On accède à un bureau des plus classiques, avec menu démarrer et on ouvre ses ‘applications’ dans des calques séparés, comme des fenetres windows. Par défaut il y a pas mal d’applications : un “Rich Text Editor”, une gestion des notes, un browser, un lecteur de RSS, un chat…

L’avantage est que l’on peut ajouter pratiquement n’importe quelle application web à ce menu démarrer et même développer des programmes en Javascrit qui s’ajouteront à notre ‘OS’. Par exemple Google SpreadSheets ou d’autres programmes pourraient être intégré à l’appli.

Il y a même un pseudo shell dans lequel on va retrouver nos fichiers crées et pouvoir taper des commandes classiques : copier/deplacer/supprimer… et aussi un ‘kill’ pour tuer une de nos fenetres.

C’est bien fait, déjà bien avancé… et impressionnant car le javascript assez bien optimisé.

bien joué les geeks !