Comment publier du beau code dans Blogger?

Je voulais faire un tutoriel en ActionScript 3, lorsque j'ai réalisé que copier du code dans Blogger donne un résultat médiocre. Par exemple, si je prends un code en AS3 et que je le copie entre des balises <code>, j'obtiens le résultat suivant:
package
{
    import flash.display.Sprite;
    import flash.events.Event;
  
    /**
     * ...
     * @author
     */
    public class Main extends Sprite
    {
       
        public function Main():void
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
       
        private function init(e:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
        }
       
    }
   
}
Le résultat est horrible! De plus, je n'ai pas la coloration syntaxique. Heureusement, un très dévoué codeur, M. Alex Gorbatchev, a développé un outil nommé Syntax Highlighter. Ce petit logiciel écrit en JavaScript lit le code entré entre des balises <pre>, le met en forme et le colorie en fonction du modèle de format choisi. Par exemple, si j'aime le code sous Eclipse, il est possible de lui dire d'afficher du code comme sous Eclipse. Le même code avec Syntax Highlighter ressemble à ceci:

package 
{
  import flash.display.Sprite;
  import flash.events.Event;
 
  /**
   * ...
   * @author
   */
  public class Main extends Sprite 
  {
  
    public function Main():void 
    {
      if (stage) init();
      else addEventListener(Event.ADDED_TO_STAGE, init);
    }
  
    private function init(e:Event = null):void 
    {
      removeEventListener(Event.ADDED_TO_STAGE, init);
      // entry point
    }
  } 
}

Quelle amélioration!

Pour installer SyntaxHighlighter, j'ai suivi les instructions de ce site: http://www.commonitman.com/2010/09/how-to-use-syntax-highlighter-3-in.html. La procédure est:

1. Allez dans Blogger->Tableau de bord->Présentation
2. Effectuez une copie de sauvegarde avec le lien "Télécharger le modèle dans son intégralité" (optionnel)
3. Choisissez l'onglet "Modifier le code HTML"
4. Cherchez la balise </head>
5. Juste au-dessus de cette balise, copier le code suivant:

   <!-- Syntax Highlighter Additions START -->
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
   <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    
   <script language='javascript' type='text/javascript'>
   SyntaxHighlighter.config.bloggerMode = true;
   SyntaxHighlighter.all();
   </script>
   <!-- Syntax Highlighter Additions END -->
   

6. Enregistrer le modèle.

Pour ajouter du code, ajouter la balise <pre class="brush[nom de la brosse];[paramètre de la brosse]> et fermer avec </pre>. Le nom brosse est étrange. En réalité, le nom de la brosse est le nom du code utilisé. Par exemple, pour le code en AS3, la balise est:

< pre class="brush:as3">
   Insérer le code ici.
< /pre >

Pour ajouter un langage, ajouter des lignes au code HTML. La liste des langages supportés se trouve ici.

Amusez-vous bien à publier vos codes!

Comment insérer des équations dans Blogger (partie 2)?

Dans le précédent billet, nous avons vu comment insérer des équations dans du HTML en MathML en utilisant le LaTeX. Le résultat fonctionne pour Firefox seulement. La meilleure méthode consiste à transformer les équations en image et ensuite à les insérer dans le document HTML. Heureusement pour nous, c'est très facile à faire avec les suites bureautiques d'aujourd'hui.

La suite Office 2007 permet d'exporter des fichiers en format .htm. Toutes les équations sont transformées en image .gif et .png. Word crée les deux en même temps. Importez les images dans Blogger et le tour est joué. Le résultat est une équation de ce genre:

Magnifique! Je dois avouer qu'hier, avec mon LaTeX, je me suis compliqué la vie.

Ce n'est pas tout le monde qui a Office ou supporte d'utiliser Office. Dans ce cas, tourner vous vers LibreOffice! La procédure est la même que pour Office. Écrivez vos équations et enregistrez le fichier en format .html. LibreOffice va générer vos équations en format .gif. L'équation précédente générée par LibreOffice ressemble à ceci:

Comparons les deux suites pour la qualité graphique de l'image créée.

Avec Office 2007.

Avec LibreOffice.

Le gagnant est clairement MS-Word. Je suis déçu de la qualité graphique des équations générées par LibreOffice. En terme d'écriture d'équation, je préfère LibreOffice. J'ai mis 2 fois plus de temps dans MS-Word pour taper la même formule que dans LibreOffice. LibreOffice permet d'entrer des commandes comme pour le LaTeX, ce qui accélère grandement la saisit d'équations. Si quelqu'un sait comment augmenter la qualité des équations dans LibreOffice, faites le moi savoir.

Comment insérer des équations dans Blogger (Partie 1)?

Certaines personnes m'ont posé des questions qui vont probablement nécessiter d'écrire quelques équations. Le HTML ne permet pas d'écrire des équations aussi facilement que LibreOffice ou Microsoft Word (Word est pénible pour des équations complexes. La notation de LibreOffice est supérieure.). Le site Math in HTML (and CSS) résume bien la situation. Il parle d'un langage d'équations nommé MathML qui permet d'écrire des équations. Voici un exemple d'équation écrite avec MathML:
$$\begin{array}{cc}a+ß=y& (1) \end{array}$$$$\begin{array}{c}\end{array}$$ Le code pour cette équation est:
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
 <mtable>
  <mtr>
   <mtd>
    <mrow><mi>a</mi><mo>+</mo>< mi>ß</mi><mo>=</mo><mi>y</mi>
    </mrow>
   </mtd>
   <mtd>(1)
   </mtd>
  </mtr>
 </mtable>
</math>
Ouf!!! C'est vraiment pénible! Par exemple en latex, le code serait:
\begin{equation}
\alpha+\beta=\gamma
\end{equation}
Ce qui est beaucoup plus beau et concis.

Je vais être franc, j'ai triché pour écrire le code en MathML. Je ne connais pas MathML et je n'ai aucune intention de l'apprendre. C'est trop complexe. J'ai utilisé un programme nommé LyX. J'ai exporté en XHTML et copier le code dans Blogger. LyX est un traitement de texte WYSIWYM (What You See Is What You Mean) avec une interface graphique qui montre un résultat approximatif du document. Voici une image de l'écran de LyX:

Interface du programme LyX.

LyX formate le texte avec le langage LaTeX. Les formules sont écrites en entrant les commandes LaTeX appropriées. Pour notre formule, nous choisissons dans le menu Insérer->Maths->Formule hors ligne et  entrons \alpha+\beta=\gamma. Le plus beau avec LyX est qu'il n'est pas nécessaire de connaître le LaTeX pour obtenir de fabuleuses équations. Le menu en bas permet au débutant d'entrer tout les symboles qu'il désire comme avec Microsoft Word. Bien entendu, la connaissance de LaTeX accélère grandement la vitesse de saisi des formules.

Une fois les formules créées. Il faut les exporter en HTML. Dans le menu Fichier, sélectionner Exporter et LyXHTML. LyX va générer un fichier XHTML avec votre formule écrire en MathML!  Ouvrer ce fichier avec votre éditeur de texte favori (dans mon cas Notepad++). Repérer la balise <math display="block" xmlns="http://www.w3.org/1998/Math/MathML"> Copier le code à partir du début de cette balise jusqu'à la balise de fermeture </math>. Dans Blogger passer en mode "Modifier le code HTML" et copier le code. Votre formule va apparaître dans votre texte. Cette méthode marche même pour des systèmes d'équations complexes sauf si vous êtes dans Internet Explorer... ou Chrome... Je suis tellement habitué à Firefox que j'oublie les autres fureteurs. IE ne supporte pas par défaut MathML et WebKit le supporte pour les versions 5 et plus. Je dois utiliser des images pour mes équations. Je vais continuer mes recherches et revenir avec une alternative dans le prochain billet.

Anecdote LaTeX.
J'étais au cinéma avec un ami pour voir le film Furtif. Furtif est un film d'action avec Jessica Biel qui raconte l'histoire de trois pilotes choisis pour un programme de développement de drone de combat intelligent. Le drone se nomme E. D. I. Le cerveau d'Edi est une grosse boule censée être un ordinateur quantique. À un moment dans le film, il montre le code source d'Edi. Et quand j'ai reconnu le langage, je me suis mis à rire! J'étais le seul dans la salle à rire et les gens ont dû me trouver étrange. Le langage était LaTeX! Un langage de traitement de texte pour programmer un drone de combat! Oh boy! Pas surprenant qu'Edi soit devenu fou.

Le drone E.D.I., probablement la dactylo la plus chère de l'histoire.

Quel logiciel utiliser pour faire un jeu sur le Web pour 0$?

Bon, il y a plusieurs façons de le faire. Je vous présente ici les alternatives que je connais qui ne requièrent pas l'achat de logiciel. La première alternative consiste à développer en ActionScript 3 avec FlashDevelop et le Flex SDK Open Source d'Adobe (voir billet sur Comment programmer en Flash pour 0$). La seconde alternative est d'utiliser la version gratuite d'Unity. Unity est un engin de jeux 3D complet avec un éditeur avancé qui permet d'essayer le jeu en cours de développement. Il y a deux types de scripts pour créer la logique du jeu: le UnityScript qui ressemble au Javascript et le C#, qui est un clone de Java par Microsoft. Pour être plus précis, il utilise Mono, qui est la version libre du C#. La syntaxe du langage reste la même. Voici un lien vers un jeu que j'ai fait à l'aide du livre Développez des jeux 3D avec Unity par Will Goldstone:

-->

Si vous ne voyez rien, allez télécharger le Unity Web Player.

Bon, un jeu n'est pas que du code. Il faut ajouter des graphiques et du son. Pour les graphiques, il y a plusieurs alternatives. La plus simple est d'utiliser le logiciel Open Source GIMP. GIMP est un logiciel de modification d'images comme Photoshop qui fonctionne sous Windows et Linux. Et bien, presque comme Photoshop. Il y a une différence majeure: les boîtes à outils sont flottantes. Si vous voulez une expérience plus Photoshop, je vous recommande GIMPshop. C'est toujours GIMP, mais avec une disposition plus classique des outils. Personnellement, je préfère le GIMP classique.

10 Capture d'image
20 Éditer l'image dans GIMP
Goto 10

Un programme que j'ai découvert et que j'aime particulièrement est Inkscape. C'est un logiciel de dessin vectoriel Open Source qui fonctionne sous Windows, Linux et Mac. D'ailleurs, mon logo a été créé avec ce logiciel.

Fenêtre principale d'Inkscape.

L'avantage du dessin vectoriel est de permettre de redimensionner son image sans perdre de qualité. GIMP est un logiciel de dessin dit matriciel. Le logiciel joue avec les pixels de l'image. Une fois l'image crée, un redimensionnement va réduire la qualité de l'image. Ce problème ne survient pas avec le vectoriel.

Pour les modèles 3D et les animations, il y a le puissant Blender. Ce logiciel est probablement un des joyaux du monde Open Source. Encore une fois, il fonctionne sous Windows et Linux. Avec Blender, il est possible de créer n'importe quel objet 3D, de l'éclairer, de le texturer et de l'animer.

L'interface de Blender est sobre et sans prétention.
Le focus est sur le modèle à créer.

Voici un film fait avec Blender:

Blender a été conçu pour les professionnels de la 3D et est très difficile à apprendre. Personnellement, la première fois que j'ai essayé Blender, je n'ai réussi à rien faire. Je n'arrivais même pas à tourner le cube, ni à zoomer et à dézoomer. Les fonctions de Blender sont activées par des raccourcis clavier. L'apprentissage de ces raccourcis est essentiel pour naviguer dans Blender. La philosophie du logiciel est: une main sur le clavier, l'autre sur la souris, ce qui assure une grande efficacité pour les initiés. Je vous recommande de lire un livre sur Blender ou de faire les tutoriels de base avant d'essayer de modéliser. Vous allez sauver beaucoup de temps et de frustration.

Finalement, pour le son, je recommande le logiciel Open Source Audacity. Ce logiciel fonctionne sous Windows, Linux et Max. Audacity est un éditeur et enregistreur de son audio.

(Source: http://audacity.sourceforge.net)

Je vous souhaite bien du plaisir dans la création de vos jeux.

Comment programmer en Flash pour 0$?

Je commence avec une question facile, car je connais déjà la réponse. Il est possible de développer en Flash sans payer un sou à Adobe, et ce en toute légalité. Quoi? Comment est-ce possible si Adobe offre Flash CS 5.5 pour 700 $ pour la version complète et Flash Builder à 700 $?

Ce qui est peu connu est qu'Adobe a créé un SDK (Software Develpment Kit) Open Source. Voici d'ailleurs l'adresse: http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

Le Flex SDK offre des codes précompilés écrits en ActionScript 3. L'ActionScript 3 est le langage utilisé pour développer en Flash. Ce langage est similaire au JavaScript, mais avec une différence de taille: il faut déclarer le type des variables. Habituellement, le typage des variables a pour résultat un accroissement des performances.

À partir du SDK, vous pouvez utiliser Notepad++ pour écrire votre code en ActionScript 3 et le compiler avec le compilateur AS3 mxml en ligne de commandes. Disons que ce n'est pas la manière la plus efficace pour coder. Il nous faudrait ce qui s'appelle un environnement de développement intégré (IDE pour Integrated Development Environment). Heureusement, il en existe plusieurs qui sont gratuits. Je connais Eclipse et FlashDevelop qui sont deux IDE Open Source. Oui, encore de l'Open Source. J'aime beaucoup l'Open Source.

Eclipse est le couteau suisse de la programmation. Il est possible de programmer dans presque n'importe quel langage simplement en ajoutant des extensions à Eclipse. Nous reviendrons dans le futur sur Eclipse, notamment pour la programmation en C++, en Java et en Python. Pour l'ActionScript, mon expérience m'a appris qu'Eclipse n'est pas idéal. FlashDevelop est de loin un produit supérieur.

FlashDevelop est disponible ici. L'installateur de FlashDevelop est très simple et devrait demander d'installer le Flex SDK. Une fois installer, vous êtes prêt à programmer en Flash, gratuitement et légalement.

Un aperçu de FlashDevelop.

Dans les prochains billets, je vous montrerai comment installer FlashDevelop et comment coder des programmes simples en ActionScript 3.

Qu'est-ce qu'explique la relativité générale et la mécanique quantique?

La relativité générale traite de la gravité uniquement. La relativité considère la gravité comme une déformation de l'espace-temps à quatre dimensions dans lequel nous vivons. Toute masse ou forme d'énergie (c'est la même chose: E=mc^2) contribue à la courbure de l'espace. La trajectoire d'un objet dans l'espace est affectée par la déformation de l'espace, comme montré sur la figure ci-dessous:

Déformation de l'espace-temps en présence d'un corps massif.
(Source http://www.jf-doucet.com/approche/Produits/Decouverte/Matiere_noire/Matiere_noire.htm)

La relativité pose les hypothèses que l'espace-temps est continu et que la matière est continue. C'est un modèle dit classique à l'instar de la théorie quantique qui considère la matière comme étant discontinue. La relativité générale a survécu à tous les tests expérimentaux qui lui ont été soumis. Cette théorie est la seconde plus solide théorie physique de l'histoire. La première étant la mécanique quantique.

La mécanique quantique décrit les interactions de la matière. Elle suppose que la matière est constituée d'objets pouvant se comporter comme une particule et comme une onde. En mécanique quantique, l'énergie est discontinue pour les particules liées. Un électron dans un atome est lié au noyau. Une particule dans un atome ne peut prendre que certaines valeurs discrètes d'énergie, nommé quanta. La mécanique quantique prédit superbement les interactions résultant des forces faible, forte et électromagnétique, mais pas la gravité.

Pourquoi la relativité est utilisée pour les distances très grandes et la mécanique quantique pour l'infiniment petit? La gravité est une force excessivement faible. C'est difficile à croire à notre échelle. Cette force nous semble considérablement forte lorsque nous essayons de nous lever le matin. Penser qu'il faut l'équivalent de toute la masse de la Terre pour générer la force de gravité que nous ressentons. Maintenant, prenez un aimant. Il est tout petit et pourtant il génère une force considérable. Si la Terre et les humains étaient des aimants, nous serions réduits en purée par la force d'attraction. Donc, à l'échelle microscopique, la force de gravité est négligeable face aux autres forces. Par contre, à notre échelle, la force de gravité domine.

Minute papillon! Tu dis que la gravité est plus faible que les autres forces, mais qu'elle domine à notre échelle. Comment est-ce possible? Les autres forces ont une charge. C'est la clé. La force électromagnétique peut être positive ou négative et la force forte a des couleurs comme charge. À l'intérieur d'un atome, un électron ressent la force électromagnétique des protons. C'est pourquoi il reste dans l'atome. Par contre, à l'extérieur de l'atome, la charge des électrons annule la charge des protons. Le résultat est que la force électromagnétique est considérablement réduite à l'extérieur de l'atome par l'annulation des charges. Il en va de même pour la force forte (c'est plus complexe que cela, mais l'argument tient). Bref, la portée de la force électromagnétique et forte est courte. La gravité n'a pas de charge et ne peut être annulée. Avec l'accumulation de particule, la force de gravité augmente sans blocage. Habituellement, plus la distance est grande et plus il y a de particules. Donc, la gravité prend le dessus si la distance est suffisamment grande.

Il est inutile de considérer la relativité générale à l'échelle atomique. La force de gravité est si faible à cette échelle que le résultat ne changera pas. De même, il est inutile d'utiliser la mécanique quantique à grande échelle, car cette théorie se réduit aux modèles classiques. Personne n'utilise la mécanique quantique pour résoudre des problèmes mécaniques. Pourquoi? Parce que c'est plus pratique d'utiliser les lois de Newton ou la relativité générale et que le résultat est suffisamment précis.

Il y a un bémol à ce que je viens de dire. À la longueur de Planck, une longueur ridiculement petite (1,6x10^-35m!!!), la gravité est significative. Un modèle combinant la mécanique quantique et la relativité générale est nécessaire. Or, la relativité générale considère la matière comme continue et la mécanique quantique non! Les physiciens travaillent depuis 40 ans à unifier la relativité générale et la mécanique quantique. La théorie des cordes est un candidat à cette unification. Bon, la question est: qui se préoccupe de distance si petite? Dans la vie de tous les jours: personne! Par contre, si vous êtes intéressez à savoir si se fameux trou noir permet de faire des bons dans l'espace-temps comme dans Star-Trek ou si vous voulez savoir l'histoire des touts premiers instants de notre univers, ce genre de détails est crucial. Et qui sait, peut-être découvrirons-nous l'hyper espace ou l'antigravité.

Qu'est-ce que l'antimatière?

L'antimatière est constituée d'antiparticules. Une antiparticule est une particule avec une charge électrique inverse. Par exemple, un électron a une charge électrique de -1 et un proton une charge de +1. L'antiparticule de l'électron est le positron avec une charge de +1. De même, un anti proton a une charge de -1. Le neutron est neutre et est, par conséquent, sa propre antiparticule.

Une collision entre une particule et une antiparticule provoque l'annihilation des deux particules en libérant une quantité d'énergie formidable fournit par la relation d'Einstein E=mc^2. L'énergie est transportée par un photon. De même, si une région de l'espace possède une énergie suffisante, des paires de particules et d'antiparticules peuvent se créer spontanément. Un exemple de se phénomène survient lors de la propagation d'un laser intense dans le vide. Si le laser est suffisamment puissant, des paires électrons/positrons seront créées dans le faisceau. De même, à la suite de collisions de particules dans les accélérateurs, des paires de particules/antiparticules sont créées.

Au premier instant de l'univers, la température était tellement élevée que des paires de particules et antiparticules se créaient spontanément et s'annihilaient. Lorsque la température a diminué, la densité d'énergie n'était plus suffisante pour produire spontanément des paires de particules. Les particules et les anti particules se sont annihilé en partie. Mais voilà, les antiparticules ne sont pas exactement le miroir des particules. Elles ne réagissent pas exactement comme les particules lorsqu'elles interagissent avec la matière. Le résultat est un léger avantage pour la matière. L'avantage est de seulement 1 par milliard. Donc, pour chaque milliard d'annihilations matière antimatière, 1 particule a survécu. Le reste est sous forme d'énergie, soit sous forme de photon ou de neutrinos ou sous forme de particules exotiques dont nous ne connaissons pas la nature. Les chercheurs tentent de comprendre mieux les mécanismes qui créent cette dissymétrie entre la matière et l'antimatière.