emacs et django : color-theme

Django et emacs ... Configuration

Emacs est très probablement l'interface de programmation la plus puissante sur GNU/LINUX. Pendant longtemps pourtant, je suis resté avec Gedit configuré au petits oignons.(j'en parlerais sans doute une autre fois). Aujourd'hui, je me décide à passer à la vitesse supérieure. J'en profite donc pour vous donner quelques astuces pour configurer emacs aux petits oignons.

le theme Django

pour bien commencer avec emacs, commençons par le rendre un peu plus attrayant !
j'ai choisis d'utiliser le thème oswald qui est ttrès certainement le plus proche d'un thème Django. J'ai donc dans mon .emacs :

(require 'color-theme)
(color-theme-oswald)

ce qui à pour effet de charger le thème oswald. C'est un thème qui à tendance à mieux rendre sur gnome-terminal que sur x .

Si vous voulez un bon résultat sur X, je vous conseil le thème gnome2 :

(require 'color-theme)
(color-theme-gnome2)

Les Polices

Bon, ok, les polices sont plutôt moches, on va donc configurer ça.
Seulement voila, pour avoir de belles policees lissées et tout, il nous faut la version d'emacs actuellement en développement :


sudo apt-get install emacs-snapshot-gtk


ouvrez votre emacs ( c'est le moment où jamais de s'y mettre non ? ) et créez le fichier ~/.Xdefaults écrivez y ceci :

Emacs.font: Monospace-10

enfin, dans votre terminal, tappez :

xrdb -merge ~/.Xdefaults

vous pouvez alors redémarrer emacs, et voila :

Script pour envoyer des e-mails en masse avec Django

J'ai eu besoin, lors d'un récent projet,(http://www.christelle-pothier.fr) d'envoyer des e-mails en masse. Nous allons voir aujourd'hui comment le faire simplement avec Django.

Le settings.py

Dans un premier temps, vous devez configurer le settings.py de votre projet en renseignant les champs :
EMAIL_HOST = "votre site" si par exemple votre site est http://www.exemple.com, le champ sera donc exxemple.com
EMAIL_HOST_USER = suivant votre fournisseur d'email, le nom d'utilisateur sera seulement votre login ou votre adresse e-mail complète : moi@exemple.com
EMAIL_HOST_PASSWORD votre mot de passe à votre service de mail

Et voila, c'est pas plus compliqué que cela, votre compte de messagerie est configuré pour Django.

Premiers tests

Pour tester vos règlages, le mieux reste d'envoyer un mail:
ouvrez donc une console et lancez le shell django :

>>> python manage.py shell
Python 2.6.4 (r264:75706, Nov  2 2009, 14:44:17)
[GCC 4.4.1] on linux2
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from django.core.mail import send_mail

cette première ligne va donc importeer la fonction d'envoie de mail.
envoyons donc réellement un mail :

>>>send_mail('un sujet','le message','expediteur@domaine.com',['destinataire@domaine.com'], fail_silently=False)

je ne commenterais pas la fonction tellement c'est simple. sachez simplement que la variable fail_silently permet de savoir tout de suitte si le mail est bien parti. Vous pourrez bien sur supprimer cette ligne en production.

 

Envoi en masse

Donc votre compte en correctement configuré, vous avez testé l'envoi de quelques e-mails, il nous faut maintenant tester l'envoi en masse. Commme vous vous en êtes peut être apperçu lors de notre test, le destinataire est inséré dans une liste. Ceela va nous permettre d'envoyer notre mail à plusieurs destinataires :

>>> send_mail('un sujet','le message','expediteur@domaine.com',['destinataire@domaine.com', 'destinataire2@domaine.com], fail_silently=False)

donc vous avez une liste de destinataires a qui vous voulez envoyer le même e-mail. Vous pouvez donc créer un fichier envoi.py :

# -*- coding: utf-8 -*-

from django.core.mail import send_mail
subject = u"votre  sujet"
message = u"Votre message"
sender = "expéditeur@domaine.com"
recipients =["la liste des destinataire"]

for recipient in recipients:
    recipient =[recipient]
    send_mail(subject, message, sender, recipient)

Mais pourquoi une boucle for me direz-vous ? N'aurions nous pas put tout simplement envoyer le message comme d'habitude ?
Si nous aurions pu mais l'avantage de cette méthode, c'est que nous allons envoyer un message unique à chaque destinataire et nous pas un message envoyé à plusieurs destinataires.

dive into python (1)

Je me suis décider à relire ce merveilleux ouvrage qu'est "dive into python" . Heureusement, il est disponible en français ici Je vais donc tenter de vous décrire une page par post. C'est une bonne façon pour moi de me remettre à ce langage. Pour vous, c'est certainement une bonne façon d'entrer en douceur dans ce langage d'une élégance rare.

le code du jour

<span class="pykeyword">def</span> buildConnectionString(params):
    <span class="pystring">"""Build a connection string from a dictionary of parameters.

    Returns string."""</span>
    <span class="pykeyword">return</span> <span class="pystring">";"</span>.join([<span class="pystring">"%s=%s"</span> % (k, v) <span class="pykeyword">for</span> k, v <span class="pykeyword">in</span> params.items()])

<span class="pykeyword">if</span> __name__ == <span class="pystring">"__main__"</span>:
    myParams = {<span class="pystring">"server"</span>:<span class="pystring">"mpilgrim"</span>, \
                <span class="pystring">"database"</span>:<span class="pystring">"master"</span>, \
                <span class="pystring">"uid"</span>:<span class="pystring">"sa"</span>, \
                <span class="pystring">"pwd"</span>:<span class="pystring">"secret"</span> \
                }
    <span class="pykeyword">print</span> buildConnectionString(myParams)

La première ligne crée la fonction buildConnectionString. Cette fonction accepte en parametres 'params'. En général, il est déconseillé de nommer les variables attendu de manière si 'lache' puisque ici le mot 'params' ne nous informe que très peut sur la nature des parametres attendus. Tout au plus, nous savons qu'on attend une liste, un dictionnaire ou un tuple.

La ligne suivante commençant par trois guillement est la documentation de la fonction . Cette ligne est capitale pour la suite, il faudra penser à ne jamais l'ommettre quand vous créez une fonction . En effet, divers outils vous permettent de relire cette documentation pour toutes les fonctions d'un programe. C'est un embryon de DDD ( Develloppement Dirigé par la Documentation).

ensuite viens le coeur de la fonction qui a été intégrée a la valeur de retour (return). Cette façon de faire, si elle est très concise et montre bien comment écrire de façon pythoniste est malgré tout assez dense. Décortiquons un peu.

les lettres k et v se réfèrent aux clés du dictionnaire (keys) et v aux valeurs (values).
params.items() fait référence aux éléments du dictionnaire ( les couples clé:valeurs )
on aurait donc put écrire :
for k, v in params.items :
    la suite du programe.

";".join(variable) est une méthode de chaine de caractère (string). la chaine de caractère ici est donc ";" qui va donc etre concaténé a sa variable.
pour finir, l'écriture suivante :
"%s=%s % (k, v)
on remplace le symbole %s par la première valeur derière le dernier % et le second symbole par la seconde valeurs.
plus simplement :
"%s est sympa" % (paul) retourne : "paul est sympa"
donc
"%s et %s sont amis" %(paul, virginie) retourne : "paul et virginie sont amis"

reste à expliquer

<span class="pykeyword">if</span> __name__ == <span class="pystring">"__main__"</span>:

il s'agit ici d'une astuce extrêmement utilisée en python qui va permettre de n'executer le bout de code suivant seulement et seulement si le programme qui est lancé corespond au fichier dans lequel se ttrouve la fonction. C'est gééralement très utile pour déboguer une partie de code avant de l'insérer dans un ensemble plus grand.

giggle un frontend pour git

Voici un frontend en GTK pour git. Il vous permet de gérer vos dépots git en ligne de manière graphique.



L'interface est classique et complète. Les possibilités sont larges. Il est facile de naviguer entre ses projets, on peut directement commiter depuis l'interface, ce qui n'est pas possible avec gitk qui est livré de base avec git ( et qui au passage est super moche tk n'étant pas un super toolkit)

Il va me faloir chercher maintenant la même chose pour mercurial. En effet mes besoins en terme de gestionnaire de version sontt assez basique. Je code modérément et ma principale activité reste le graphisme. Je n'ai pas encore trouver un getionnaire de version qui puisse versionner mes travaux. en revanche , un retour vers la version n-1, cela git et mercurial me le propose facilement.

créer rapidement des éléments SVG avec SVG Web

Si vous suvez un peu l'actualité des technologies web, vous savez certainement que google viens de lancer une bibliothèque javascript permettant d'utiliser le SVG sur 95% des navigateurs (même sur internet explorer, c'est dire).

Dans un précédent article, je vous donnais la traduction du guide de démarrage rapide de cette bibliothèque.

Dans cet article, je vais vous montrer comment créer simplement de nouvelles formes SVG via javascript. Je part du principe que vous avez lu déjà le guide de démarrage rapide et que vous avez commencé à jouer un peu avec.

Donc votre serveur web est déjà lancé. Si ce n'est pas le cas, dans le répertoire SVGWeb on tappe :

java -jar src/tools/webserver.jar

crée deux documents dans le répertoire de test :

• test.html
• test.svg

le fichier test.html va servir à recevoir votre fichier SVG, nous n'y toucherons plus par la suite :

<!doctype html>
<!-- This file provides a simple example of directly embedding SVG into a page
as well as pulling SVG in from an external file. -->
<html>
<head>
<!-- The svg.js file must be the first JavaScript file you pull into your
page; provide the optional data-path attribute if the
svg.js/svg.swf/svg.htc files are stored in a different directory from
where your HTML page is. -->
<script src="../../src/svg.js" data-path="../../src"></script>

<!-- By default Flash is used for rendering on IE and the native SVG support
is used on other browsers. You can override this and force Flash to
do all the rendering on all browsers in two ways; either provide
a META tag as follows:

<meta name="svg.render.forceflash" content="true" />

Or change the URL of your page to have the following query variable:

helloworld.html?svg.render.forceflash=true
-->

<!-- Example JavaScript block that shows scripting our SVG -->
<script type="text/javascript">
window.onload = function() {
// SVG on the page should only be manipulated after the page is
// finished loading

}
</script>

</head>

<body>


<!-- Embed an external SVG file using the following syntax; it must
be done exactly as given, rather than using the EMBED tag. Change
the data and src attributes to point to where your SVG file is
relative to the HTML page. -->

<!--[if IE]>
<object src="test.svg" classid="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<![endif]-->
<!--[if !IE]>-->
<object data="test.svg" type="image/svg+xml"
width="800" height="600"
id="mySVGObject">
<!--<![endif]-->

</object>

</body>
</html>

comme vous pouvez le constater ce n'est que le fichier helloworld.html modifié pour nos besoins. Les deux lignes importantes dans ce fichier sont :

<object src="test.svg" classid="image/svg+xml"
et
<object data="test.svg" type="image/svg+xml"

qui permettent de pointer vers notre fichier svg. J'ai aussi définis une hauteur et une largeur de 800*600 sur ce document avec les deux lignes suivantes.

Passons maintenant à notre fichier svg.

<?xml version="1.0"?>

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="600"
style="background-color: #D2B48C;"
onload="loaded()">
<script type="text/javascript"><![CDATA[
function loaded() {
// change onloadFunc to point to your real onload function that you
// want called when the page is truly ready
var onloadFunc = doload;

if (top.svgweb) {
top.svgweb.addOnLoad(onloadFunc, true, window);
} else {
onloadFunc();
}
}

function doload() {

}
]]></script>

</svg>

c'est vraiment la forme la plus simple possible d'un fichier SVG. On remarquera tout de même que j'ai choisit une couleur de fond :

style="background-color: #D2B48C;"

et que j'ai définis une hauteur et une largeur :
width="800" height="600"

si vous ouvrez votre navigateur sur test.html vous aurez ceci :


plutôt basique n'est ce pas ?

tout notre travail maintenant va se faire à l'interieur de la fonction doload()

voyons donc comment ajouter des formes simples :





Un Cercle

dans la fonction doload on insère :

var el = document.createElementNS(svgns, 'circle');
el.setAttribute('cx', 100);
el.setAttribute('cy', 100);
el.setAttribute('r', 50);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);

ce qui nous donne ceci :

détaillons maintenant ce bout de code :

var el = document.createElementNS(svgns, 'circle');

on cré une variable el qui est un élément svg de type cercle,

el.setAttribute('cx', 100);
el.setAttribute('cy', 100);

on lui indique les coordoné du centre x et y

el.setAttribute('r', 50);

un rayon

el.setAttribute('fill', '#223FA3');

une couleur

el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');

une largeur de contour et une couleur de contour. Simple n'est ce pas ?

ensuite, il va falloir l'afficher car pour le moment ce n'est qu'une variable. On va donc chercher le père du document à savoir le premier élément svg de la page :

var root = document.getElementsByTagNameNS(svgns, 'svg')[0];

et nous lui ajoutons notre cercle comme enfant :

root.appendChild(el);




Un rectangle

pour réaliser un rectangle, ce n'est pas bien différent je vais donc vous donner le code qui s'explique de lui même :

var el = document.createElementNS(svgns, 'rect');
el.setAttribute('x', 100);
el.setAttribute('y', 100);
el.setAttribute('width', 50);
el.setAttribute('height',200);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);


Les Images

Un peu différent, l'insertion d'une image se passe comme suit :

el = document.createElementNS(svgns, 'image');
el.setAttribute('x', 200);
el.setAttribute('y', 200);
el.setAttribute('width', 50);
el.setAttribute('height', 50);
el.setAttributeNS(xlinkns, "href", "image.jpg");
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);

Vous pouvez remarquer que cela se passe comme un rectangle , des coordonées x et y, une largeur, un hauteur. l'élément à retenir ici est :

el.setAttributeNS(xlinkns, "href", "image.jpg");

en effet puisque notre image est un lien, on va devoir utiliser
setAttributeNS au lieu de setAttribute mais c'est la seule chose qui change.

Voila pour ce petit tour très basique des formes SVG via javascript, sachez que les possibilités sont bien évidement bien plus larges que se ttrès rapide tour d'horizon, mais nous y reviendrons bientôt.

guide de démarrage rapide pour le toolkit svg de google

cet article est une traduction française du document anglais crée par google sur : http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Démarrage rapide

ceci est un guide de démarrage rapide d'utilisation du toolkit SVG

Qu'est ce que le SVG ?

SVG ou Scalable Vector Graphics (ndt: Graphique Vectoriel Redimensionnable est un standard du web ouvert qui permet d'ajouter simplement des graphiques vectoriels à vos pages web. De la même manière que HTML vous offre des balises simples comme <form> ou <table> à ajouter à vos pages web, SVG vous offre des tags simples comme <circle> ou <rect> pour un rectangle. Travailler avec le SVG ressemble beaucoup à travailler avec HTML. Vous utilisez javascript pour animer les choses, CSS (Cascading Style Sheet (ndt: Feuille de style en cascade)) pour ajouter des styles, etc. Une bonne introduction au SVG peut être trouvée à www.svgbasics.com (note: si vous connaissez un bon tutoriel sur le SVG qui introduit les notions de balisage, de scripting, et SMIL contactez-nous (ndt: c'est à dire google, pas moi)

Qu'est ce que le toolkit WEB SVG ?

SVG WEB est une bibliothèque Javascript qui permet un support du SVG dans de nombreux navigateurs : Internet Explorer, Firefox, et Safari. En utilisant cette bibliothèque et le support natif des navigateurs, vous pouvez cibler instantanément ~95% des utilisateurs.

A partir de là, vous optenez un support partiel du SVG 1.1, des animations SVG (SMIL), Fonts, Vidéo et Audio, scripting par le DOM et les styles via JavaScript et bien plus pour une bibliothèque d'à peu près 60k. Votre contenu SVG peut être directement inclu dans du HTML5 normal ou à travers la balise OBJECT. Si le support SVG est déja présent dans le navigateur, alors il est utilisé bien que vous puissiez surclasser cela et faire en sorte que le SVG WEB Toolkit gère les choses à la place.

SVG WEB peut tout aussi bien être utiliser via des pages HTML et JavaScript ou des applications 100% flash ou flex. Ce guide de démarrage rapide ne décrit que l'utilisation du SVG WEB Toolkit via HTML et javascript plutôt que via les application flash ou flex.


Gardez bien à l'esprit que le SVG WEB Toolkit est en alpha. Si vous trouvez quelque chose remplissez un bug
Si vous utilisez SVG WEB, dit le à la communauté sur notre page de wiki "Projects Using SVG Web"

Ressources

A n'importe quel moment lorsque vous travaillez sur ce guide de démarrage rapide, les ressources suivantes sont a votre disposition :

* An in-depth technical User Manual
* The demo viewer
* des exemples de fichier SVG et HTML que vous pouvez observer
* si tout le reste à échoué le SVG Web Google Group est là si vous avez des questions à poser.

Démarrage

1. téléchargez et décompressez la dernière archive zip du SVG WEB
2. SVG web est livré avec un petit serveur web que vous pouvez lancer en local de manière à démarrer rapidement. En développant, vous ne pouvez pas simplement charger des choses avec des URL's du style file:// car certains navigateurs et flash ont des problèmes quand ils chargent des choses depuis le système local. Au lieu de cela, vous devez charger vos pages via http://; le petit serveur web intégré rend cela très simple. Vous devez avoir JAVA d'installé pour l'utiliser.
Pour lancer le serveur web allez simplement dans le répertoire de SVG WEB et tapper ces commandes :
java -jar src/tools/webserver.jar

Par défaut, cela démarre le serveur web sur 127.0.0.1 sur le port 8080
vous pouvez également utiliser d'autres adresses IP locales si vous voulez écouter sur plusieurs adresses IP; Cela peut être très utile si par exemple vous avez une instance de machine virtuelle Parallels tournant sur Windows XP, et que vous voulez accéder à vos fichiers pendant que vous travaillez. Par défaut, Parallels installe un loopback sur l'adresse 10.211.55.2 Vous pouvez utiliser le paramètre optionel -h pour démarrer sur de multiples adresses IP avec le server web joint :
java -jar src/tools/webserver.jar -h 127.0.0.1 10.211.55.2
Ce qui démarrera le serveur web local sur 127.0.0.1:8080 et 10.211.55.2:8080.
3. Assurez-vous que le serveur local est démarré en ouvrant votre navigateur sur la page http://127.0.0.1:8080/samples/javascript-samples/helloworld.html
.Vous devriez voir deux images SVG côte à côte, avec un cercle bleu et le texte : "Hello World From Embedded SVG!" et "Hello World From An SVG File!".

Vous êtes désormais prêt à jouer avec le SVG et la bibliothèque SVG WEB ! Commençons par plonger dans l'exemple helloworld.html.
A partir de maintenant nous allons partir du principe que vous avez lancé votre serveur web.

La balise SVG WEB

Pour utiliser SVG WEB vous devez placer une balise de script dans votre page HTML. Cela doit être la première balise de script de votre page.
<script src="svg.js"></script>

<!--D'autre balises de script peuvent suivre après la balise de script SVG WEB -->

Si votre page HTML et votre bibliothèque SVG WEB sont dans des répertoires différents, vous devez aussi indiquer un atttribut HTML 5 data-path
pointant vers l'endroit où se trouve le fichier SVG WEB. Cela permet à SVG WEB de savoir où sont les fichiers supplémentaires dont il à besoin.

Par exemple,, si la bibliothèque SVG Web est dans ../../src, vous devriez avoir la balise script suivante :
<script src="../../src/svg/svg.js" data-path="../../src"></script>

Placer du SVG dans votre page

Il y as actuellement deux manières d'ajouter du SVG dans votre page en utilisant SVG Web:

* En insérant directement du SVG dans votre page web en l'incluant dans du HTML normal non XHTML
* En utilisant la balise OBJECT pour insérer votre SVG dans votre page.

L'exemple helloworld.html illustre les deux façon de faire. regardons donc ce fichier pour voir en action ces deux manières d'insérer du SVG.

Insertion direct

SVG Web vous permet d'ajouter directement du SVG dans vos page HTML, même pour des pages normales non-XHTML.

Pour ajouter directement du SVG, placez votre SVG dans un bloc SCRIPT et placez l'attibut type à image/svg+xml. Ceci est une syntaxe HTML 5 valide pour ajouter des blocs de données et permet à votre SVG d'être lu correctement. Voici un exemple direct que l'on retrouve dans le fichier helloworld.html :

<h1>This is some HTML here!</h1>
<script type="image/svg+xml">
<svg
width="200" height="200"
style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
id="embeddedSVG">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From Embedded SVG!</text>
</g>
</svg>
</script>

Quand vous ajoutez directement du SVG vous devriez supprimer la déclaration XML et le DOCTYPE SVG comme <?xml version="1.0"?> Vous n'avez pas non plus besoin de déclarer le Xlink ou l'espace de nom SVG car ceux ci seront considérez comme par défaut.

Insérer avec la balise OBJECT

vous pouvez également ajouter votre SVG avec la balise OBJECT . Cela peut être pratique lorsque vous souhaitez garder votre SVG sur un fichier hors de votre page web.

Dans un mode idéal, nous utiliserions une seule balise OBJECT; malheureusement, nous devons utiliser une syntaxe autrement plus complexe pour permettre à Internet Explorer et nous devons répéter la balise OBJECT deux fois avec des noms d'attributs bien différent. Voici un exemple de notre fichier helloworld.html :

<!--[if IE]>
<object src="../svg-files/helloworld.svg" classid="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<![endif]-->
<!--[if !IE]>-->
<object data="../svg-files/helloworld.svg" type="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<!--<![endif]-->
</object>

En général, vous n'aurez qu'a utiliser directement cette syntaxe en la modifiant comme cela :

* Changez les attributs src et data pour pointer vers là où se trouve votre fichier svg sur les deux balise OBJECT
* Changer la valeur de height et width suivant la hauteur et la largeur dont vous avez besoin.
* Si vous avez un attribut id ou class prenez garde à ce qu'il soit sur les deux balise OBJECT.

Notez que votre fichier SVG doit provenir du même hote que la page où il est rendu.

Il est également important que vottre fichier SVG ai une déclaration XML à la première ligne et que tout les espaces de nom soient convenablement déclarés; De base le fichier doit être un fichier XML valide, ce qui est un peu différent que lorsque vous intégrez du SVG directement dans votre page Web. Voici le fichier helloworld.svg :

<?xml version="1.0"?>

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
style="background-color: #D2B48C;">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From An SVG File!</text>
</g>
</svg>

Both the direct embed and OBJECT options can provide optional fallback content; see the User Manual for more details. (ndt: désolé mais cette phrase m'échappe)

Le SVG Hello World

Le SVG que l'on retrouve dans l'exemple helloworld.html montre un aperçu de SVG nous allons donc le revoir rapidement ici. Le revoici :

<?xml version="1.0"?>

<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="200"
style="background-color: #D2B48C;">
<g
id="myGroup"
fill="blue"
style="font-size: 18px; text-anchor: middle; font-family: serif;">
<circle
id="myCircle"
cx="100" cy="75" r="50"
stroke="firebrick"
stroke-width="3" />
<text x="100" y="155">Hello World</text>
<text x="100" y="175">From An SVG File!</text>
</g>
</svg>

Dans un premier temps, notez que l'on spécifie une hauteur et une largeurà notre SVG nous donnons aussi une couleur de fond pour le fichier SVG entier. si vous laissez le fond sans couleur, il serra transparent ce qui peut être une bonne chose si vous voulez que votre page HTML soit visible au travers.

ensuite remarquez l'élément g , qui est un élément de groupement. Vous pouvez vous représenter exactement de la même façon que l'opération de groupement de Photoshop . Grouper des éléments ensemble est un façon très simple de les traiter tous ensemble quand vous les scriptez ou les transformez. De plus vous pouvez placer des valeurs par défauts pour certains styles qui se propagerons à tous leurs enfants. Dans l'exemple ci dessus on donne la valeur par défaut fill="blue" dont tous les enfants vont hériter: on choisit une police de 18 pixels; on centre le texte au milieu de l'image et on choisit la police sherif.

On utilise ensuite un élément circle a dessiner à l'écran. on choisit l'emplacement du centre du cercle en utilisant cx et cy et on décide d'un rayon avec r . On peut spécifier la couleur de la ligne de contour à utiliser avec l'attribut stroke, et on donne la largeur de la ligne avec stroke-width.

In SVG, text doesn't line wrap (ndt: désolé encore une fois, le sens m'échappe), donc nous créons deux élément text et nous donnons la localisation x et y pour les placer.

Changer le rendu

Par défaut, nous utilisons le rendu flash sur Internet Explorer alors que nous utilisons le rendu natif sur les autres navigateurs comme firefox ou safari . Vous pouvez optionnellement changer cette façon de faire et forcer le rendu flash sur tout les navigateurs. Cela peut rendre le dévellopement plus simple car vous pouvez utiliser le rendu SVG Web flash sur firefox et son set complet d'outils de debuggage et de devellopement. Vous pouvez aussi choisir de déployer en utilisant le rendu Flash pour tous les navigateurs de manière à utiliser les posibilités SVG qui ne sont pas nativement présentes ou pour avoir un environnement de devellopement plus homogène.

Vous pouvez changer votre rendu de deux manières. Premièrement vous pouvez forcer le rendu Flash en changeant l'URL de votre page avec les flags suivants :

http://127.0.0.1:8080/samples/javascript-samples/helloworld.html?svg.render.forceflash=true


en cliquant sur ce lien, par exemple, va vous montrer le fichier helloworld.html mais va forcer le rendu flash à être utiliser pour tout. Vous pouvez également placer svg.render.forceflash à false.

La seconde façon de modifier le rendu est d'ajouter une balise meta dans votre page HTML:

<meta name="svg.render.forceflash" content="true">

Déployer SVG Web

Voyons comment vous pouvez déployer votre fichier SVG et SVG Web sur votre serveur web.

Dans un premier temps, téléversé l'archive ZIP sur votre serveur Web. Les fichiers suivants doivent être présent:

* src/svg.js
* src/svg.htc
* src/svg.swf

les autres fichiers dans l'archive ZIP sont optionels; certains sont assez utiles et peuvent vous rendre service pendant votre déploiement.

Notez que tout les fichiers SVG Web doivent être sur le même domaine que toutes les pages qui pourrait utiliser la bibliothèque. Par exemple, si vous avez http://example.com/mypage.html, alors vous devez vous assurer que les fichiers cités plus haut sont eux aussi sur http://exemple.com placer ces fichier sur static.example.com ne fonctionnera pas. Ceci est du aux limitations des fichiers Flash et Mircosoft HTC (svg.htc) qui sont utilisés par SVG Web.

Vous devez vous assurer que votre serveur web possède le règlages MIME correcte pour les fichiers Flash SWF (application/x-shockwave-flash) et fichiers Microsoft HTC (text/x-component). Puisque de nombreux devellopeurs ne savent pas ce qu'est un type MIME ou n'ont pas la possibilité de changer les règlages de leur serveur, SVG Web fournis de nombreux outils pour rendre cela plus simple.

Premièrement votre serveur web est probablement règlé correctement et il n'y as rien à changer.

Pour le verifier, assurez vous que le fichier src/tools/config.html est présent sur votre serveur et ouvrez le dans votre navigateur. Ce fichier va scanner et verifier que les règlages des type Mime sont bons. S'ils ne le sont pas, il vous dira lesquels ne sont pas bon et vous pourrez passez à l'étape suivante.

A ce moment, la meilleur chose à faire est actuellement de modifier votre serveur web pour ajouter ces type MIME. Si vous n'avez pas la possibilité ou les connaissance pour le faire, trois fichiers simple sont joints pour vous permettre de faire le travail à vottre place en fonction de ce que vous pouvez utiliser sur votre serveur web (PHP, ASP ou JSP). En fonction de ce que vous pouvez utiliser sur votre serveur, choisissez l'un de ces fichiers :

* src/svg-htc.php - Ferra le travail pour vous si vous pouvez utiliser du PHP sur votre serveur
* src/svg-htc.jsp - Ferra le travail pour vous si vous pouvez utiliser du JSP sur votre serveur
* src/svg-htc.asp - Ferra le travail pour vous si vous pouvez utiliser du ASP sur votre serveur

Si vous choisissez l'un de ces fichiers, vous devez l'indiquer en utilisant l'attribut optionnel data-htc-filename dans chaque page HTML qui utilise SVG Web:

<script src="../svg.js" data-path=".." data-htc-filename="svg-htc.php"></script>

Donnez simplement le nom comme svg-htc.jsp, plutôt que le chemin complet comme ../../svg-htc.jsp. Notez que si vous utilisez l'un de ces fichiers de manière à forcer automatiquement le type MIME, quand vous utilisez l'une des démos livrées ou un exemple, vous devez ajouter le texte suivant pour indiquer d'utiliser votre fichier HTC sinon, cela ne marchera pas :

http://example.com/svgweb/samples/demo.html?svg.htcFilename="svg-htc.php">

Scripter SVG

Regardons comment scripter votre SVG en utilisant JavaScript. Cette section n'as pas pour but d'être un totoriel sur JavaScript plus SVG; au lieu de cela c'est un aperçu vraiment basique montrant quelques petites divergences nécessaires à SVG Web

SVG Web inclu un large éventail du DOM (Model Objet du Document) quand vous travaillez avec le SVG. Il est pratiquement complet même s'il y as quelques ommissions ou des zones sur lesquelles nous travaillons actuellement. Votre JavaScript, même sur Internet Explorer, à 'l'illusion' d'avoir le support SVG natif.

Commençons par scripter le SVG qui est ajouté dircetement dans votre page web. Nous allons utiliser les sources qui sont dans helloworld.html. Premièrement, avant de travailler avec le DOM ou avec SVG sur votre page, vous devez attendre le chargement complet de votre page, comme vous le feriez avec du HTML normal:

window.onload = function() {
// do stuff now
}

Sur la page helloworld.html vous allez voir deux boutons "change colors" et "change text". quand ils sont cliqués, ils changent la couleur des cercles dans les deux images SVG de la même manière qu'ils changent le texte. Le script pour tout cela n'est qu'une balise <script> normale ajouté à la page, dans les deux fonctions changeColors et changeText. Regardons la méthode changeColors:

function changeColors() {
// get elements from our embedded SVG first

// use getElementById
var circle = document.getElementById('myCircle');

// change using setAttribute
circle.setAttribute('stroke', 'green');

// can also use style property
circle.style.fill = '#8A2BE2';

// change the value inside our SVG OBJECT now

// use the 'contentDocument' property to navigate into the SVG OBJECT
var doc = document.getElementById('mySVGObject').contentDocument;
circle = doc.getElementById('myCircle');
circle.style.fill = '#8A2BE2';
}

Premièrement vous remarquez que nous récupérons notre cercle sur la page en utilisant un appel document.getElementById('myCircle') normal. Cela va récupérer notre circle qui est ajouté directement dans notre page. Une fois que nous avons notre cercle, nous pouvons changer la couleur soit en utilisant un appel 'setAttribute' ou en changeant simplement la valeur de circle.style.fill; les deux méthodes donne le même résultat. Notez que ce code fonctionne même sur Internet Explorer; SVG Web produit la magie nécessaire pour donner l'illusion d'un support natif.

De manière à changer la couleur du cercle à l'interieur de notre SVG OBJECT ( la seconde image SVG) nous devons 'naviguer' à l'interieur. La clé ici est d'utiliser la propriété contentDocument. Nous récupérons d'abord l'objet SVG de la page par son ID, et nous prenons ensuite la propriété contentDocument. Nous avons alors un objet document normal avec lequel nous pouvons travailler, on récupère simplement le cercle qui est inséré à l'interieur de l'objet SVG et nous changeons sa couleur.

// use the 'contentDocument' property to navigate into the SVG OBJECT
var doc = document.getElementById('mySVGObject').contentDocument;
circle = doc.getElementById('myCircle');
circle.style.fill = '#8A2BE2';

Regardons maintenant la fonction changeText; nous l'avons écrit un peu différement que nécessaire pour vous montrer les autres fonctions DOM que nous pouvons utiliser:

function changeText() {
// use getElementsByTagNameNS to get our text from our embedded SVG

// 'svgns' is a 'magic' variable that we make available; it is just
// the SVG namespace 'http://www.w3.org/2000/svg' so you don't always
// have to remember it.  We also make the variable 'xlinkns' available.
var textElems = document.getElementsByTagNameNS(svgns, 'text');

// change the text Hello World to Goodbye World
for (var i = 0; i < textElems.length; i++) {
  if (textElems[i].childNodes[0].nodeValue == 'Hello World') {
    textElems[i].childNodes[0].nodeValue = 'Goodbye World';
  }
}

// change the text inside our SVG OBJECT as well
var doc = document.getElementById('mySVGObject').contentDocument;
textElems = doc.getElementsByTagNameNS(svgns, 'text');
for (var i = 0; i < textElems.length; i++) {
  if (textElems[i].childNodes[0].nodeValue == 'Hello World') {
    textElems[i].childNodes[0].nodeValue = 'Goodbye World';
  }
}
}

Premièrement remarquez que nous pouvons obtenir les balises SVG via la page pas seulement par leurs ID; néanmoins, c'est vraiment important que vous utilisiez la méthode qui gère les espaces de nom getElementsByTagNameNS plutot que getElementsByTagName. Sinon, cela ne marchera pas! Vous noterez que nous ateignons la variable global svgns que SVG Web rend utilisable et facilite le travail avec les espaces de nom SVG ( une variable similaire est disponible pour les espace de nom Xlink, xlinkns quand nous faisons des liens hypertexte). Joint ensemble, cela permet de travailler aisément avec les méthode d'espace de nom:

var textElems = document.getElementsByTagNameNS(svgns, 'text');

Cela va récupérer tout les éléments text SVG qui sont directement ajoutés à votre page ( i.e cela vous renvoie deux éléments text; cela ne vous retournera aucun SVG OBJECT puisqu'ils ne sont pas directement dans la page. Une fois que nous avons nos éléments, nous allons pouvoir créer une boucle dessus et récupérer la valeur du texte en appellant textElems[i].childNodes[0].nodeValue. La valeur d'un élément texte est contenue dans un noeud DOM text. Nous avons donc à prendre le premier enfant et récupérer sa valeur. Une fois que nous avons trouvé un noeud qui as la valeur "Hello World" , nous changeons la valeur du texte de façon similaire.

Nous ne créons aucun noeud de façon dynamique dans notre exemple helloworld.html, mais voici un exemple simple d'un bloc de code montrant comment nous nous y serions pris. Le plus important, regardez comment nous utilisons la méthode d'espace de nom createElementns au lieu de createElement:

var el = document.createElementNS(svgns, 'circle');
el.setAttribute('cx', 200);
el.setAttribute('cy', 200);
el.setAttribute('r', 5);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');

var group = document.getElementById('myGroup');
group.appendChild(el);

Une petite chose important à garder à l'esprit est que lorsque vous créez un noeud DOM texte, que vous allez utiliser avec votre SVG, vous devez ajouter un argument boléen supplémentairepour aider SVG Web :

var textNode = document.createTextNode('hello world', true);
var svgText = document.createElementNS(svgns, 'text');
svgText.setAttribute('x', 100);
svgText.setAttribute('y', 100);
svgText.appendChild(textNode);

Maintenant, regardons comment scripter à l'interieur d'un fichier SVG plutôt que de l'ajouter directement dans votre page HTML. Nous allons utiliser le fichier helloworld.svg comme un exemple. Je vais vous montrer le fichier entier d'abord puis le découper ensuite :

<svg onload="loaded()">
<script type="text/javascript"><![CDATA[
    function loaded() {
      // change onloadFunc to point to your real onload function that you
      // want called when the page is truly ready
      var onloadFunc = doload;
    
      if (top.svgweb) {
        top.svgweb.addOnLoad(onloadFunc, true, window);
      } else {
        onloadFunc();
      }
    } 
  
   function doload() {
      // developers original onload handler
    
      // add an event listener to our circle; on* style events added right
      // to the markup are not yet supported
      var circle = document.getElementById('myCircle');
      circle.addEventListener('mousedown', function() {
        alert('You pressed the mouse button on our circle!');
      }, false);
   }
]]></script>

Premièrement, notez que nous avons un peu de triche à réaliser sur l'évenement onLoad de manière à aider SVG Web. Si vous voulez avoir du script dans votre fichier SVG, vous devez changer l'attribut SVG onload pour pointer vers une fonction spéciale, loaded que vous devez simplement copier-coller dans votre code et changer la variable onloadFunc pour pointer vers le nom de votre fonction réelle :

function loaded() {
// change onloadFunc to point to your real onload function that you
// want called when the page is truly ready
var onloadFunc = doload;

if (top.svgweb) {
  top.svgweb.addOnLoad(onloadFunc, true, window);
} else {
  onloadFunc();
}
}

Pour les évenement SVG, nous supportons actuellement seulement la méthode addEventListener:

// add an event listener to our circle; on* style events added right
// to the markup are not yet supported
var circle = document.getElementById('myCircle');
circle.addEventListener('mousedown', function(evt) {
alert('You pressed the mouse button on our circle: ' + evt.target.id);
}, false);

Cela va faire apparaitre une boite d'alerte quand l'utilisateur va cliquer. Notez que l'objet event est passé à la méthode (même sur Internet Explorer -- utilisez ceci au lieu de window.event).Vous pouvez utiliser l'objet event pour avoir des information, comme l'ID de la cible:evt.target.id.

astuces et conseils

Cette section vous donne des conseils et des astuces pour vous aider à la performance et la stabilité.
*Le rendu SVG natif de Firefox peut parfois être lent dans certains cas. Dans ces circonstances, il est recommandé que vous utilisiez simplement le rendu SVG Web en remplacement sur Firefox si vous avez des problèmes de performance ou de stabilité avec le rendu natif de Firefox.
*Si vous faites de nombreuses opérations DOM dans une boucle, comme créer des éléments ou mettre à jour un attribut, vous pouvez significativement accélérer les choses en utilisant la méthode suspendRedraw. Un exemple :

 var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
  var circles = document.getElementsByTagNameNS(svgns, 'circle');
  var suspendID = root.suspendRedraw(5000);
  // let's say there are 500 circles
  for (var i = 0; i < circles.length; i++) {
    circles[i].setAttribute('fill', 'red');
  }
  root.unsuspendRedraw(suspendID);
  // could also do root.unsuspendRedrawAll() to clear out all suspended
  // operations

La méthode suspendRedraw prend un compte à rebours en milliseconde avant que le réaffichage soit forcé; un chiffre élévé est recommandé. Lisez la section suspendRedraw dans le manuel utilisateur pour plus de details sur ces méthodes.

*Si vous créez beaucoup de noeud DOM en une seule fois, vous devriez utiliser l'API DOM DocumentFragment. Cela accélèrera de beaucoup les choses, surtout si vous créez ces noeuds au chargement de la page. Pour créer un DocumentFragment pour être utilisé avec SVG, vous devez appeler document.createDocumentFragment(true). Notez le paramètre supplémentaire true --ceci est requis par SVG Web pour l'aider à savoir que ce DocumentFragment sera utilisé avec SVG, et qu'il pourra être utilisé par le backend Flash. Un petit exemple :

  // note the extra 'true' argument
    var frag = document.createDocumentFragment(true);
    for (var i = 0; i < 100; i++) {
      var circle = document.createElementNS(svgns, 'circle');
      circle.setAttribute('x', i * 10);
      circle.setAttribute('y', 10);
      circle.setAttribute('r', 5);
      circle.setAttribute('fill', 'red');
      // append to DocumentFragment
      frag.appendChild(circle);
    }
    // now append the DocumentFragment to the DOM
    var svg = document.getElementsByTagNameNS(svgns, 'svg')[0];
    svg.appendChild(frag); // DocumentFragment disappears leaving circles
regardez la section sur DocumentFragments dans le manuel utilisateur pour plus de détails.

les materiaux , les textures, les rendus sous blender

Pour quiconque utilise un logiciel de 3d, le rendu reste un élément primordial. Cet article recense une collection de lien qui vont vous permettre de trouver facilement votre bonheur et de créer vos propres textures.

Blender ou Yafray ?

Voila une bonne question a se poser quand vous voulez faire votre rendu. Il est même préférable de répondre à cette question avant même de créer vos textures. En effet, blender et yafray fonctionnent absoluement différament en terme de gestion de materiaux. Ainsi, même sans toucher aux règlage, une scène aura deux rendu très différent qu'elle soit redu sous blender ou yafray.

Le rendu sous blender

Le moteur interne de blender fonctionne avec des principes assez simple. Une lampe éclaire une zone, l'objet qui ne reçoit pas de lumère n'est pas éclairé. Il n'y as pas de calculs complexe et le resultat dépend du soin que vous aurez à créer vos éclairages.

Cette manière de procéder ne vous permet pas de traitement complexe comme les lampes à photons, ou les caustiques par exemple. en revanche en disposant correctement votre scène vous pourrez obtenir de très bons résultats avec (et ce n'est pas négligeable) un temps de rendu bien plus court qu'avec yafray. En rêgle générale, il est toujours bon de donner sa chance au moteur interne de blender et ce pour deux raison :

1. il vous permet de gagner en temps de rendu
2. il vous permet de vous perfectionner dans l'apprentissage du fonctionnement interne de blender, de maitriser plus finement vos éclairages et vos textures.

 

Les ressources pour le moteur de rendu blender

Pour commencer, bien entendu le wiki officiel de blender :

http://wiki.blender.org/index.php/Doc:FR/Manual

et en particulier la section sur les lampes, les materiaux et les textures.

vous avez aussi, toujours sur le wiki officiel un tutoriel sur les ombres  et un autre sur l'éclairage à trois points .
vous trouverez aussi d'autres tutoriels mais pas forcément en français sur la page tutoriel du wiki officiel
ici se trouve un très bon tutoriel sur les ombres et leurs règlages, en anglais mais très didactique .

ensuite il ne faut pas oublier de citter le blender clan. C'est le repaire des utilisateur français. Les tutoriels y sont un peu plus avancés et vraiment interressant. http://blenderclan.tuxfamily.org/html/modules/content/index.php?id=5

Je vous recommande également chaudement la lecture du blender art magazine et en particulier le numéro 7 (materiaux) le numéro 12 (les textures) le numéro 17 (les rendus)

Voila pour ce rapide tour d'horizon des ressources disponibles sur le moteur de rendu blender. Mais n'oubliez pas que rien n'est plus formateur en 3D comme ailleurs que la pratique. Donc, n'hésitez pas à pratiquer, pratiquer et pratiquer encore. C'est de cette manière que vous prendrez les bons reflexes et obtiendrez les meilleurs rendus.

git ou comment j'en suis venu a travailler intelligement

Cela fait déja quelques temps que je recherche un gestionnaire de version pour travailler correctement. Comme je compte bosser un peu avec Heroku, j'ai pensé que travailler avec git semblais une bonne idée. Dans la suite de ce post je part du principe que vous savez ce qu'est un gestionnaire de version et que vous savez voue en servir.

Sur ubuntu, git s'installe avec un simple sudo apt-get install git-core
on peut le configurer avec les commandes :  
git config --global user.name "Votre nom"
git config --global user.email "Votre Mail"

Commandes de base

On clone un dépot comme cela :

git clone git://adresse.git
ou
git clone http://adresse_du_depot

pour créer un nouveau dépot, la commande est :
git init .

cette commande cré un nouveau dépot dans le répertoire courant. Cela permet quand on est comme moi un utilisateur unique qui souhaite garder un oeil sur l'évolution de ses projets de créer rapidement de nouveau dépots en fonction des projets en cours.

pour ajouter des fichiers au dépot il faut faire

git add "nom du fichier"

pour "commiter"

git commit

pour commiter les fichier du dépot qui ont été modifiés :

git commit -a

Les branches

Bon ok un gestionnaire de version c'est bien mais les branches c'est mieuX. git va nous permetttre de forker notre dossier de manière très simple :

création d'une nouvelle branche :

git branch nouvelle_branche

ensuite; pour passer d'une branche à une autre on a :

git checkout nom_de_la_branche

A savoir que la première branche est toujours Master.
 
pour fusionner deux branches :

git merge nom_de_la_branche

ce qui aura pour effet de merger la branche courante avec la branche nom_de_la_branche

si il y as des conflits, git va marquer les fichiers problématiques. Un git diff va vous montrer les différences entre les fichiers pour vous laisser corriger. Vous pouvez ensuite commiter vos changement. On peut ensuite supprimer la branche que l'on viens de merger avec :

git branch -d nom_de_la_branche
Si au contraire on veux supprimer une branche sans la merger avec la branche courante :

git branch -D nom_de_la_branche

annuler un merge avnt le commit :

git reset --hard HEAD

annuler un merge après le commit :

git reset --hard ORIG_HEAD

Voila pour démarrer avec git. Je vous conseille pour creuser plus loin le processus de lire http://alexgirard.com/git-book/book_fr.pdf

un livre de la communauté sur l'utilisation de git

se passer de la barre de tache

Toujours à la recherche de solutions pour optimiser mon travail sur ordinateur, j'ai découvert quelques petites astuces qui je l'espère vous permettrons, comme moi de travailler plus rapidement.

Le constat :

comme les utilisateurs d'emacs l'on bien compris, l'utilisation de la souris est une perte de temps. Avec une suite de raccourcis claviers bien configurés vous pouvez tout faire ou presque sans la souris.

Pour se faire, j'ai décider de placer tout mes raccourcis sur la zone gauche de mon clavier. Cela me permet d'utiliser ma main droite pour autre chose : manger une tartine de pain, boire un café ou, par exemple utiliser ma souris ou ma tablette sur Gimp, Inkscape ou autre logiciel d'édition graphique.

Ctrl + Alt + T lancement du terminal

Ce raccourcis clavier est plutôt "historique". Je m'y suis habitué sur mon eeepc 701 où ce raccourcis clavier servait à lancer le terminal. Je le cherchais souvent sur mes autres ordi j'ai donc décidé de définir ce raccourcis sur tout mes autres PC.

J'ai ensuite, sur le même principe essayé de configuré un CTRL + ALT + W pour le web et ainsi de suite. C'est en faite une bien mauvaise idée. En effet, cela me demande l'usage de mes deux mains et la main gauche quitte sa position naturelle sur le clavier.

ALT + TAB choix de la fenêtre

ce raccourcis clavier existe depuis toujours sur mes pc, j'en ai donc une bonne habitude. Pourtant, j'ai utilisé Compiz pour rendre se raccourcis vraiment utile.

J'utilise le selecteur d'application statique ( de manière à avoir quelquechose de vraiment rapide. ALT+TAB est donc le raccourcis clavier pour la fenêtre suivante sur tout les bureaux (y compris les fenêtres minimisées ALT+² est la fenetre précédente sur tout les bureaux. Cela me permet de ne presque pas bouger ma position pour aller d'une fenêtre à l'autre.

SUPER+TAB

pour rester dans la zone des raccourcis, j'ai définis le plugin echelle ( c'est le plugin expose chez mac) sur ce raccourcis. il permet de ne voir et donc de sellectionner que les fenêtres du bureau en cours.

ALT+ F4

Bon, je pense que tout le monde connais ce raccourcis qui permet de fermer une fenêtre mais j'avoue que sa position est idéale. dans la même zone que les raccourcis dévolue à la gestion de fenêtre, le F4 en est légerement éloigné ce qui évite les appuie intenpestifs.

Avec cet ensemble de raccourcis, je peut donc me passer de la barre de choix des fenêtre du panel de gnome.
Ensuite, il faut supprimer aussi la barre de menu de gnome et je peut alors virer totalement le panel de gnome et ne laisser qu'un tout petit panel pour la zone de notification et l'heure.

Pour remplacer la barre de menu, j'utilise gnome do.

J'avais au début utiliser Gnome Do avec le doc façon mac mais à quoi bon des icones s'il faut cliquer dessus. Tout l'intéret est bien évidement de se passer de la souris.

ALT+ A

J'utilise ce raccourcis pour lancer gnome-do. Cela me permet de rester très proche de ALT+TAB et de SUPER+TAB

cela me permet donc de lancer mes applications directement avec le clavier. Je ne suis pas très fort sur les plugins car cela pollu le menu des resultats de gnome do et j'aime pouvoir lancer un mogiciel en un minimum de frappe (toujours dans l'optique de travailler plus vite) J'utilise néanmoins le plugin managin windows qui me permet de faire des actions sur les fenêtres très intéressante et rettrouver le fonctionnement d'un tilding manager comme WMII par exemple.

TILE permet de diviser tout l'espace disponible à l'écran entre les aplications non minimisées.
MAXIMIZE permet de maximiser la fenêtre qui a le focus
RESTORE permet de "dé-réduire" toutes les fenêtres

Avec cette configuration, je n'ai plus besoin d'utiliser ma souris pour tout ce qui concerne la gestion des fenêtres et le lancement de mes programmes. J'ai donc supprimé la barre de tache du bas de mon écran.