Wake up Neo…

matrix_header
Lire la suite

Publicités

Le format epub

Décharge de responsabilité : Je raconte, ici, une expérience, je ne suis pas expert dans la conception de ebooks. Je partage tout simplement ce que j’ai appris, il y a peu ,sur le format epub. S’il vous arrive un souci technique ou autre avec des epubs, je n’y suis pour rien, n’hésitez pas à vous documenter davantage sur le sujet si vous souhaitez faire des expérimentations. 😉

Alors que je furetais en quête de didacticiels concernant ma première liseuse, je suis tombé sur un article parlant du format .kepub.epub. Ce format de livre numérique permet d’afficher sur sa liseuse des informations supplémentaires telles que le nombre de pages, l’auteur, des statistiques… C’est un format non-standard utilisé sur les liseuses de la marque Kobo.

De là, par curiosité, je me suis penché sur comment étaient conçus les epubs. J’ai donc fait pour la première fois du reverse engineering.

Reverse engineering, kesako ?

Le reverse engineering, ou retro-ingénierie pour les francophones, consiste à étudier un objet, un produit afin de déterminer comment celui-ci a été construit. Il s’agit souvent de décortiquer ce dernier. L’ingénierie inversée permet non seulement de savoir reconstruire l’objet/produit mais également de comprendre son fonctionnement. Ici, j’ai décomposé plusieurs livres au format epub pour comprendre comment ils étaient conçus et comment les concevoir. Certes, c’est du reverse engineering très très basique mais cela n’en reste pas moins intéressant.

Un exemple de ebook ?

Vous pouvez prendre n’importe quel ebook. Personnellement, j’ai décomposé plusieurs ebooks afin de bien comprendre. Pour cet article, mon exemple est le livre numérique Resilient Web Design que je considère comme une très bonne base pour comprendre la structure d’un epub, celui-ci étant bien structuré.

Step 1 : Compresser et décompresser un ebook

Dans un premier temps, ne connaissant pas trop comment cela était conçu, j’ai utilisé un logiciel appelé ePub Packager. Cette application disponible sur macOS est très intéressante : elle permet de décomposer un epub en un répertoire et, inversement, à partir d’un répertoire donné de créer un epub. Si vous n’avez pas de Mac, pas de panique, à la fin de cet article nous aborderons comment faire sans ce genre de logiciels.

Step 2 : Comprendre la composition d’un ebook

J’ai glissé-déposé l’ebook intitulé « Resilient Web Design » dans ePub Packager et le logiciel m’a généré un répertoire éponyme « ResilientWebDesign ».

Voici la décomposition du répertoire :

ResilientWebDesign/
 ├── META-INF/
 │        ├── com.apple.ibooks.display-options.xml
 │        └── container.xml
 ├── mimetype
 └── OEBPS
 ├── content.opf
 ├── toc.ncx
 ├── Text/
 │        └── chapter-1.xhtml
 │        └── ...
 ├── Styles/
 │        └── style.css
 ├── Images/
 │        └── cover.png
 │        └── ...
 └── Fonts/
 └── AverageMonoBold.otf

Notons qu’il s’agit de la structure d’un ebook version 3 si je ne dis pas de bêtises (oui il existe epub v1, v2 et v3…). La différence est tout simplement que la v3 supporte le HTML5, le CSS3, le langage MathML, les vidéos, les musiques, etc. Somme toute, EPUB3 est plus moderne que EPUB2. Mais la structure n’est pas si différente que cela entre le EPUB2 et EPUB3 : en EPUB3, vous avez besoin d’ajouter une table de matières en xhtml. Nous verrons cela en temps et en heure.

Concrètement, la structure de votre ebook est arbitraire MAIS vous êtes obligé d’avoir un répertoire intitulé META-INF ainsi que le fichier mimetype. Décortiquons et essayons donc de comprendre un peu tout ça.

Le répertoire META-INF

Le fichier com.apple.ibooks.display-options.xml n’est pas obligatoire mais conseillé, il est utilisé par l’application iBooks d’Apple.Ce fichier permet d’indiquer les spécificités du ebook à prendre en compte.

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
    <platform name="*">
         <option name="specified-fonts">true</option>
         <option name="interactive">true</option>
         <option name="fixed-layout">true</option>
         <option name="open-to-spread">true</option>
    </platform>
    <platform name="iphone">
        <option name="orientation-lock">landscape-only</option>
    </platform>
</display_options>

platform-name permet de spécifier la plateforme visée (l’astérisque signifie qu’on vise tous les appareils apple, sinon on spécifie « iphone » ou « ipad »). Vous trouverez facilement sur internet une documentation complète des options et leurs significations (bon ok je vous mâche un peu le travail : voici, par exemple, une petite documentation proposée par Apple).

Si ce fichier n’est pas très important, la présence du fichier container.xml dans le répertoire META-INF est, quant à elle,  obligatoire. Ce document permet d’identifier le type de support et les chemins d’accès aux fichiers racines des publications EPUB incluses dans le conteneur.

<?xml version="1.0" encoding="UTF-8"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>

La balise rootfile indique l’emplacement d’un fichier au format OPF que nous aborderons plus loin. Dans notre cas, le fichier se trouver dans le répertoire OEBPS. Notons également que le type MIME du fichier OPF est obligatoirement spécifié : platform-namemedia-type="application/oebps-package+xml".

mimetype : Ce fichier ne comporte pas d’extension (bien que ce soit du plain text…) et ne comporte qu’une seule ligne : application/epub+zip. Cela indique le type MIME du fichier compressé. En effet, le fichier epub est tout simplement un fichier zip ! Au lieu d’avoir comme extension .zip, il comporte l’extension .epub.

Le répertoire OEBPS

Remarque : Ce répertoire peut s’appeler OPS. La version3 utilise OPS. Mais OEBPS marche aussi. En réalité, les lecteurs epubs ne prennent pas en compte le nom du répertoire, ce qui les intéressent ce sont les fichiers opf, xhtml et ncx que nous allons maintenant détailler.

OPF

Le fichier OPF est le manifeste. Il va indiquer tout ce dont à besoin le lecteur d’epub. Ce serait très long de détailler ce fichier, je vous invite à lire la documentation officielle.

NCX (Navigation Control file for XML)

Ce fichier est moins important depuis la version 3, il s’agit de la table de matières du livre. Avec la version 3, on utilise un fichier au format XHTML (HTML) avec une balise , mais on garde tout de même le fichier ncx.

Exemple, nav.xhtml :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="generator" content="pandoc"/>
  <title>Resilient Web Design</title>
  <link rel="stylesheet" type="text/css" href="../Styles/styles.css"/>
</head>
<body epub:type="frontmatter" xml:lang="en">
  <nav epub:type="toc" id="toc">
    <h1>Table of Contents</h1>
    <ol>
      <li>
        <a href="../Text/Introduction.xhtml#introduction"><i>Introduction</i></a>
      </li>
      <li>
        <a href="../Text/chapter1.xhtml#chapter-1-foundations">Chapter 1: <span>Foundations</span></a>
      </li>
      <li>
        <a href="../Text/chapter2.xhtml#chapter-2-materials">Chapter 2: <span>Materials</span></a>
      </li>
      <li>
        <a href="../Text/chapter3.xhtml#chapter-3-visions">Chapter 3: <span>Visions</span></a>
      </li>
      <li>
        <a href="../Text/chapter4.xhtml#chapter-4-languages">Chapter 4: <span>Languages</span></a>
      </li>
      <li>
        <a href="../Text/chapter5.xhtml#chapter-5-layers">Chapter 5: <span>Layers</span></a>
      </li>
      <li>
        <a href="../Text/chapter6.xhtml#chapter-6-steps">Chapter 6: <span>Steps</span></a>
      </li>
      <li>
        <a href="../Text/chapter7.xhtml#chapter-7-challenges">Chapter 7: <span>Challenges</span></a>
      </li>
      <li>
        <a href="../Text/About.xhtml#about-the-author">About the author</a>
      </li>
      <li>
        <a href="../Text/Index.xhtml#index"><i>Index</i></a>
      </li>
    </ol>
  </nav>
  <nav class="hidden" epub:type="landmarks" id="landmarks" hidden="">
    <h1>Landmarks</h1>
    <ol>
      <li>
        <a epub:type="cover" href="../Text/cover.xhtml">Cover</a>
      </li>
      <li>
        <a epub:type="titlepage" href="../Text/title_page.xhtml">Title Page</a>
      </li>
      <li>
        <a epub:type="introduction" href="../Text/Introduction.xhtml">Introduction</a>
      </li>
      <li>
        <a epub:type="bodymatter" href="../Text/Introduction.xhtml">Introduction</a>
      </li>
      <li>
        <a epub:type="backmatter" href="../Text/About.xhtml">About the author</a>
      </li>
      <li>
        <a epub:type="index" href="../Text/Index.xhtml">Index</a>
      </li>
    </ol>
  </nav>
</body>
</html>

XHTML, ETC

Le contenu du epub est en fait des pages XHTML ! (ou HTML5 depuis la version 3). Vous pouvez définir le style des pages grâce au feuille de style (CSS) et ajouter des images comme on le fait ordinairement pour un site web. Vous pouvez également ajouter du son mais attention tout lecteur d’ebook ne prend pas forcément en charge la lecture du son.

Step 3 : Créer son propre ebook

Pour créer votre ebook, il vous faut donc des bonnes connaissances dans les langages suivants : HTML, CSS et XML. Il existe également des éditeurs qui vous mâchent le boulot et qui vous permet de ne vous préoccuper que de la partie rédaction du livre. Créer à la main son ebook est un moyen le moins coûteux et simple mais reste fastidieux à réaliser.

Bonus : Compresser et décompresser un ebook avec le terminal de macOS

Compression

zip -rDX9  * -x "*.DS_Store" -x mimetype

Décompression

unzip .epub

Libre à vous d’ajouter en commentaire vos remarques, notifier une erreur, etc.

Mobile development

Developing for mobile

Before starting to read this post, I have to warn you that I zapped so informations about mobile development because I just wanted to firstly focus on my opinion about the differents ways to make an app (not a nap !)… I will never mention Windows Phone Development not because I don’t like Windows, just because I never did such apps for this OS.

Introduction

Nowadays, developping for mobile is… MANDATORY. Almost.

Whether it is for a website or a simple software, the companies needs to be responsive and to fit to the mobile generation. Indeed, if you’re not going to make an application, you may think that mobile developpement is none of your business and this is so wrong since if you need to create a web site, it has to be responsive…

why

Smartphones, tablets, smartwatches… The ways to communicate and to interact with each others have changed and keep going to change…

Anyway, today I’m here to talk about developing mobile applications not about developing responsive web sites.

android_vs_ios

Android or iOS ?

And by developing mobile applications, I’m talking about Android and iOS development (mostly Android)

The differents ways…which one is the best ?

The classical way

Either on Android or iOS (and of course Windows Phone… ahem…), you can create your apps with « native » languages. This is called native development. I personnally think that using the term « native » is so wrong in so many levels within the context of developping Android app with Java. Actually, if you want to go really deep in native development in Android, you shall use C/C++ and then you’re really doing native…

Anyway, if you want to take this path, you will have to develop for each platform in differents languages :

  • Android : Java with the SDK or C/C++ with the NDK
  • iOS : Objective-C or Swift (since 2014)
  • WP : C# & .NET

Hybrid development

When the possibility to make web app appeared, it made cleary possible to develop with simple languages as HTML, CSS and JS. But why settle for the web app development ? Then came the hybrid development. The idea is simple : make a web app, wrap it with some cool stuffs (to allow the access of the smartphone’s functionnalities for example) and at the end « compile » to obtain a native app. A quick search with your favorite search engines will give you the most used hybrid frameworks.

Outsiders

I called them outsiders because if they offers you the possibility to develop in native language (C++ or C#), it doesn’t really work like native developpement and doesn’t offer the same opportunities. Those outsiders are Qt and Xamarin.

My feelings about that

Once upon a time, a programmer discovered Android Native Dev…

Three years ago, I learned on an expedited time frame the mobile development for Android during my studies. This year, still in the same context, I have the opportunity to work again on it and… wow… How things have changed ! Indeed, I should have expected that changes but… still !

I’m sad to hear that Eclipse plug-in (made by Google) called ADT has been abandonned in profit of a new IDE called Android Studio, developped by JetBrains. If you didn’t know, JetBrains develops a lot of IDE and each IDE are specific to a language e.g IntelliJ are made for Java development, PHPStorm for PHP dev, and so on. As all the IDE from JetBrains, Android Studio has a obviously similar interface (same editor, so same engine, etc.) but is really made for Android development. The nicest feature improved and given in this editor (even if the preview mode sometimes doesn’t work well) is the UI design mode with templates quickly available to get a nice interface quickly and be able to devote fully to the code. By the way, when you create a new project, to keep you focused on coding and not designing, you can choose the pre-made templates…

This is nice but it doesn’t make forget the heaviness of work : on one side the Java programming and XML coding on the other side… And also trying to not lose yourself in the different IDs of each elements… To be honest, developping in Java + XML sometimes upset me because it is tedious… Not difficult but tedious…

tumblr_maaec25jog1ruuum2

Me after a day of coding … one page of an application

Well, on the other side, native development in this context is great, you can focused on the code and not on the design or compatibilty problems. 🙂

I’ve just started iOS class…So… I will update or write another article for the iOS… Sorry :/ (But I think that it is not so different than Android)

The biggest (and obvious) problem is still the obligation to develop in differents languages for each OS… And if you’re affraid to code redondantly for each OS… There’s a solution : Hybrid App.

Spirit of Webdesigner

The Motto of Hybrid Dev is quite a reminder of Lord of the Rings to me : One language to every OS. To be honest, I’ve invented this motto while I was writing this post, but it is clearly the aim of hybrid development.

As I always loved developing web sites with the magic trio HTML/CSS/JS, it is a waaaay easier for me to create some stunning apps ! Not too long ago, I chose to develop some projects with Ionic Framework which let me more freedom to code and design the app. For example, with the CSS, I could easily have customized buttons. Using Ionic brings you AngularJS and Cordova which means that you can make app easily, quickly and less expensive (in money but also in time). I could make you a pretty prototype within three hours ! 😮

So the difference ? What you want to do ! Because there are some limitations with the hybrid development… Aaaaand this is the perfect moment to have a glance at the third wheel : the Outsiders. *tadaaaam*

Cute

I had a glance at Qt (pronounced « Cute »).

Qt is mixing everything (C++, JS, QML…) and the result is quite nice ! You can develop in C++ with some style in QML, or just do your code in QML, or QML and JS… Everything’s possible. It is designed to be fully multi platform ! (not only Android, iOS but also Desktop software…). QML is a genuinely language, simple as ABC.

I did not practice a lot until today, but I’m pretty seduced by Qt. If Ionic won’t fit to my expectations, I’ll start to work with Qt.

The weak point of Qt (to me) is the size it takes on the hard drive (almost 10 Go…!). Beside this weak point, don’t forget that Qt exists for a long time as it has been originally created to make GUI with C++ and Python (PyQT).

There is also Xamarin, recently bought by Microsoft. Xamarin is based upon Mono (at least it was at the beginning) and it uses the C# language. I don’t know if it is interesting, but it is the actual trendy software to develop cross-platform applications…

Of course there are plenty softwares, editors, etc. such as Windev to develop cross-platform app… But I don’t think I’ll try all of them !

May this article will help you in your Quest of Making A Stunning App !

En passant

Les brèves de nerdycode

Ninn : Ninn Is Not Notepad

Ça y est, j’ai enfin commencé le développement de Ninn !

Késako

J’en parlais ici et ici. Pour ceux qui veulent gagner du temps, voici le topo : créer un éditeur de texte.

Pourquoi ce projet ?

À l’époque, où j’ai commencé à penser à créer un éditeur de texte, je débutais en informatique. Le but du projet était d’apprendre le java, du moins à la base. Étant très pris dans ma scolarité, j’ai mis de côté ce projet sans pour autant l’oublier. En 2013, je me suis re-penché dessus  afin d’établir un bref cahier des charges du logiciel.

2014 fut une année très compliquée, donc une fois de plus j’ai reporté la mise en développement.

J’ai enfin pu coder quelques lignes de code pour sortir une version alpha (vraiment très alpha…).

Pourquoi j’en parle du coup (vu qu’il est même pas terminé) ?

Il me semblait important de noter cette évolution dans ce projet (qui n’aboutira peut-être pas :/ ). Cette version alpha repose sur tous mes acquis de ces 3 dernières années, donc je suis plutôt content de voir que j’ai évolué. 😀

Oui, je me la pète (un chouïa)

En 2012, une version alpha de ce type, je l’aurais sortie très probablement en 1 mois (voire plus), et là une à deux semaines m’auront suffit !

Dans les détails

Pour le moment, le logiciel est sous creative commons BY-SA. Je commencerais à réfléchir plus sérieusement à la legislation quand le projet sera devenu un peu plus important.

Je ne donne pas encore plus de détails sur les caractéristiques spécifiques à Ninn développées ou à développer de l’éditeur car je veux garder ça pour moi pour le moment. Seules les fonctionnalités de base ont été pour le moment ajoutées; à savoir : Ouvrir un fichier texte, écrire un fichier texte…

Ne l’oublions pas, je fais ça pour le fun. Il n’est pas question de proposer un logiciel aussi performant que Sublime Text ou Atom.

Les premières versions ont été donc faites en Java en Août 2015, vous pouvez télécharger tout ça ici : Ninn, le site (au design très sobre, en effet). Peut-être que je coderais le projet dans un autre langage (du type C++) ou bien avec une techno du type Qt (et son super langage QML).

Qt

Que je prononce, et que je prononcerais à jamais, « KuTé » [1]

J’ai commencé à regarder sans trop me presser Qt et le QML. Très bon langage. Du très très lourd !! Je reviendrais certainement là-dessus.

[1] Qt se prononce « Quioute » (Cute en anglais).

En passant

Les brèves de nerdycode

Des sous-titres pour tous

soapclub_logoSur SoapClub, je vous invite à lire mon article sur l’importance des sous-titres sur youtube et internet.


Pourquoi j’en parle ?

Tout est expliqué dans l’article 😉

Les ebooks

Souvenez-vous dans le dernier numéro des brèves de nerdycode, je parlais d’un petit projet personnel que j’essaie de mettre en place. Eh bien, voici une version alpha du projet, rien d’éloquent en soi, mais cela pose les bases 😀

Capture d’écran 2015-03-27 à 10.45.51

(Cliquez sur l’image pour accéder au site)

Voilà, voilà c’est tout pour aujourd’hui ! 🙂

Un peu de maths : les puissances 2/2

Suite du post Un peu de maths : les puissances part.1
Petit rappel sur les règles de la puissance :

  • x^0 = 1.
  • x^y = x^(y/2)*x^(y/2) si y est pair.
  • x^y=x^(y-1)*x sinon.

Le petit programme qui suit demande deux valeurs (x et i) et calcule x puissance i :

import java.util.Scanner;

class puissance{
  static double puissance(double x,int n){
    double reponse;
    if (n==0) {
      reponse=1;
    }else{
      reponse=puissance(x,n/2);
      if(n%2==0){
        reponse=reponse*reponse;//pair
      }else{
        reponse=reponse*reponse*x;//impair
      }
    }
    return reponse;
  }
  public static void main(String[] args) {
    double x;
    Scanner lectureValeur = new Scanner(System.in);
    System.out.print("Valeur de x : ");
    x=lectureValeur.nextDouble();
    System.out.print("Puissance demandee : ");
    i=lectureValeur.nextInt();
    System.out.println(x+"^"+i+" = "+(int)(puissance(x,i)));
  }
}

Résultat sur le terminal :

nerdyprog@nerdycode ~ $ javac puissance.java
nerdyprog@nerdycode ~ $ java puissance
Valeur de x : 2
Valeur de i : 2
2.0^2 = 4

Le deuxieme petit programme permet d’écrire un calcul de la forme 2^2 et effectue le calcul :

import java.util.Scanner;

class puissance2{
  static double puissance(double x,int n){
    double reponse;
    if (n==0) {
      reponse=1;
    }else{
      reponse=puissance(x,n/2);
      if(n%2==0){
        reponse=reponse*reponse;//pair
      }else{
        reponse=reponse*reponse*x;//impair
      }
    }
    return reponse;
  }
  public static void main(String[] args) {
    double x=0;
    String calcul;
    int j=0, k=0, n=0;
    Scanner lectureEntre = new Scanner(System.in);
    System.out.print("Calcul à effectuer : ");
    calcul=lectureEntre.nextLine();
    for (int i=0; i<calcul.length(); i++) {
      if(calcul.charAt(i)!='^'){
        j=i+1;
        k=j+1;
      }else{
        break;
      }
    }
    x=Double.parseDouble(calcul.substring(0,j));
    n=Integer.parseInt(calcul.substring(k,calcul.length()));
    System.out.println(x+"^"+n+" = "+(int)(puissance(x,n)));

  }
}

Résultat sur le terminal :

nerdyprog@nerdycode ~ $ javac puissance.java
nerdyprog@nerdycode ~ $ java puissance
Calcul à effectuer : 2^2
2.0^2 = 4

 

Bien coder c’est coder proprement

Je suis tombé précédemment sur une présentation faite par Jean-Baptiste Nizet, informaticien chez NinjaSquad : https://speakerdeck.com/jnizet/5-apprentissages-pour-le-programmeur-debutant

J’ai trouvé intéressant de rebondir là-dessus vu mon dernier post. Je reviens donc sur cette présentation et je présente mon point de vue. En clair, je commente cette présentation 🙂

1 – Indentez votre code

Oui, comme le dit JB Nizet, l’indentation est promordial en programmation. Sur ce point, rien à dire. C’est comme si j’écrivais ce post sans accents, sans ponctuation. Ce serait illisible ! (Pour faire hype, branché, à la mode, on emploiera le terme refactoring).

2 – Erreurs et trace de bugs

La plupart des étudiants en informatique ne lisent pas ces traces d’erreurs car c’est un bloc illisible à première vue ! Puis même après avoir pris l’habitude de lire ces traces d’erreur, voire avoir pris l’habitude d’utiliser le débugueur de l’IDE, ça reste chiant ce gros pavé.

Que ce soit Eclipse ou IntelliJ (je suis agnostique là-dessus en ce qui concerne ces usines à gaz, pas de préférences), l’apprentissage reste faible. Les gens vont aller sur google et recopient la trace d’erreur et avec un peu de chance, ils trouveront une tentative de résolution sur StackOverflow…

3 – La documentation c’est pour les rigolos

Google c’est magique. Encore plus si vous faîtes votre recherche : 1) en anglais 2) avec des mots-clés.

Personnellement, je trouve que la documentation c’est utile, mais de temps en temps c’est vachement pas très instructif et ça n’aide pas tout le temps. Surtout en développement web quand vous utilisez des frameworks et autres librairies.

Donc le RTFM [1], c’est gentil mais dès fois pour des cas complexes ce serait plutôt LMTGTFY [2] ! 😛

4 – Killing the name of

J’en ai déjà parlé précedemment. Les variables foor, bar, toto, c’est cool quand vous testez pour vous-même. Les variables qui n’ont aucun sens c’est à proscrire. De même pour les variables trop verbales. Surtout en Java ! Oui Java est déjà tellement verbeux alors si vous en rajoutez une couche…

5 – Throws, catch…

Je ne suis pas encore un expert dans tous les langages mais à vue de nez ça sent le Java !

Je profite de ce cinquième point pour faire une parenthèse sur Java.Java ne sera jamais mon langage préféré pour plusieurs raisons.

La première : Il est trop verbeux.

Un exemple :

Capture d’écran 2014-07-03 à 16.20.53

La deuxième : Les exceptions.

Pour un débutant voire quelqu’un qui a au minimum un an d’expérience en Java (voire deux dans mon cas), les exceptions c’est un autre monde.

La troisième : Un langage objet devrait être simple.

Je n’ai pas encore manipulé d’autres langages objets jusqu’à présent mais je reste persuadé que le langage objet fut créé tout d’abord pour simplifier la programmation. Il faudrait comparer Java avec le langage C++ ou encore le langage Objective-C. Mieux encore ! Avec le langage Smalltalk !

Il y a d’autres raisons, mais ce sont les principales. Java n’en reste pas moins un langage intéressant mais il est loin d’être le meilleur à mon goût.

En passant

Les brèves de nerdycode

Petite mise au point autour de SoapClub

J’avais durant mes jeunes années un blog « personnel » que j’avais délaissé au profit de celui-ci. Étant donné ma lenteur légendaire pour sortir un ou deux articles (que je juge plutôt assez complets pour la plupart, mais ça c’est mon avis), il est tout à fait compréhensible que SoapClub fut délaissé.

Pourquoi j’en parle du coup ?

Parce que j’ai décidé de reprendre tout à partir de zéro, from scratch comme dirait les informaticiens. Quelques articles restent pour prouver que ce blog n’est pas si jeune que ça, mais j’essaierai de rehausser le niveau « intellectuel » de ce blog (oui, j’ai honte de certains articles de ce blog, d’ailleurs certains ont été supprimés). Il y a également une « refonte » du design du blog (il y en aura sûrement une aussi pour nerdycode) au niveau du logo ainsi que du style choisi.

soapclub_logo

Et nerdycode dans tout ça ?

L’idée est que SoapClub reste très en retrait (du moins) vis à vis de l’univers informatique donc nerdycode (qui a deux ans et quatre mois maintenant d’ailleurs) reste toujours là. Peut-être même bien que j’écrirais d’avantage (qui sait ? :mrgreen: )

Des ebooks en cours de rédaction

C’est un petit projet personnel que j’essaie de mettre en place. Rien d’exceptionnel. L’idée est que comme j’aime écrire et faire de l’informatique, j’ai envie de partager un peu mes connaissances sous forme d’ebooks. Il y aura sûrement des articles de ce blog qui apparaîtront sous forme d’ebooks. Le côté bénéfique pour moi sera la mise en place de la plateforme de téléchargement des ebooks à l’aide de technos web dernier cri (oui cela me permettrait de mettre en pratique ce que je sais faire avec ces nouvelles technos).

Seront-ils gratuits ?

Oui, ils seront gratuits. D’une part parce que le contenu des ebooks n’apportera rien de bien nouveau vis à vis du dense contenu que vous trouverez sur Internet. D’autre part, car je n’ai pas envie de me casser les pieds à mettre en place un système de payement.

Il y aura quoi au menu ?

Je n’ai pas encore anticipé tout le contenu. Il y aura sûrement une collection « Web Dev » qui traite de tout ce qui a un rapport avec le développement web, une collection « From scratch »qui sera une suite de ebooks portant sur divers sujets, et des annexes.

Voici un bref aperçu du début d’un des premiers ebooks rédigés (à chaud) :

Capture d’écran 2014-07-03 à 20.28.39

Coder proprement

2035041015-0

Je ne serais ni le premier, ni le dernier à vous parler de code propre, vous en conviendrez. Si je suis venu parler de ceci c’est parce que je suis en train de lire l’intéressant livre de Robert C Martin : « Coder proprement ». J’adhère sur certains propos que j’ai pu lire dans ce livre et j’avais envie de partager sur la toile mon avis à ce propos. *trop excité*

original

Qu’est-ce un code propre ?

Un code propre est :

  • un code lisible
  • un code simple
  • un code bien pensé/réfléchi
  • un code minimal si possible
  • un code améliorable par n’importe qui

Le fond c’est bien, mais la forme ça aide.

Un code indenté est toujours plus beau qu’un code non indenté ou mal indenté. J’en veux pour preuve la norme de l’école française réputée : l’Epitech. J’ai un copain qui y est et qui m’avait raconté que dès la première année, il vous impose une norme d’écriture. Si vous cherchez un peu sur Google, vous trouverez des bribes concernant cette norme. Elle apprend aux élèves à écrire du bon code (Il y a un autre raison à cette norme, mais là n’est pas le sujet).

Quand vous codez, faîtes comme si quelqu’un irait lire votre code après et que vous ne serez pas à ses côtés. En entreprise ce sera très certainement le cas. Le code sera maintenu par quelqu’un d’autre que vous.

Vous êtes une sorte d’écrivain, vous écrivez un roman, pour vous mais surtout pour les autres.

Un code propre c’est un bon code.

Je ne suis pas un programmeur expert, mais ma faible expérience me permet déjà d’adhérer à ces propos ! Combien de fois j’ai pu voir un code illisible bien qu’efficace ? Pour compléter la définition de code propre, je devrais rajouter qu’on devrait mettre un maximum de commentaires, pas forcément de faire un pavé digne de Guerre et Paix, mais une phrase explicite. L’anglais est effectivement le langage de rigueur. Je m’explique :

A titre d’expérience, j’ai travaillé sur un projet scolaire de logiciel de dessin vectoriel simplifié avec deux collègues. Le projet est visible sur un compte github. Durant le projet, j’ai pu jauger le niveau de mes deux collègues. L’un était très très fort, l’autre aussi bon que moi. Celui qui était très fort on va l’appeler Jacques, et celui qui l’était moins Michel. On a bossé en équipe et on s’est ramassé un 20/20. 😀

auiomd

Bon, d’accord j’avoue j’ai choisi mes mots pour placer cette vanne 😀

Jacques était très fort donc assez rapide à nous fournir du code. Son premier jet fut quasi illisible sauf pour lui. Mais pas seulement son premier jet en fait : peu à peu on avançait dans le projet, ses variables restaient parfois un mystère. Avec un peu de bon sens, j’arrivais à comprendre (mais pas tout) son code. Ce qui n’était, hélas, pas le cas de Michel !

49446854

Peut être bien que Jacques trouvait compréhensible d’écrire private Coord mse = new Coord(0,0); les coordonnées de la souris (mse > mouse), mais ce n’est pas forcément le cas pour nous autres !

Bon attention quand même à ne pas non plus à faire trop long comme nom de variable ! private Coord coordinatesOfTheMousePointerWeUseOnCanvas = new Coord(0,0); C’est un poil trop verbal. Préférez par exemple : private Coord coordMouse = new Coord(0,0);

Chacun à sa façon d’écrire, bien entendu. Mais il n’en reste pas moins qu’il vous incombe la responsabilité d’être compréhensible.

Toujours sur ce même projet, j’ai pris l’habitude de toujours commenter mon code. Je n’en suis pas peu fier ! 😀 Ce qui n’était pas le cas de mes collègues !

49447312

Franchement, c’est très probablement la deuxième raison pour laquelle Michel était perdu. (Du coup, comme on devait rendre un projet commenté, on a passé nos deux nuits blanches pour tout commenter…Merci les copains! Les joies du code).

En résumé, si vous revenez dans 3 mois sur votre code, et que cela vous semble pas très compréhensible du premier coup d’œil, peut-être que vous avez mal écrit vos variables, ou que les commentaires sont pas très utiles à la compréhension. D’un coup c’est moins parlant. D’où : un code propre, c’est un bon code.

Scout toujours, scout un jour !

Le-film-Quand-Gerard-Jugnot-joue-au-chef-scout-sur-W9-a-20h50_portrait_w674

Un truc qui m’a « marqué » dans ce livre c’est ce proverbe de scout : « Laissez le campement plus propre que vous ne l’avez trouvé en arrivant »
Rien à dire, tout y est dit :mrgreen:

Nan sérieusement, j’ai eu à un moment reprendre du code, quand j’ai vu le truc ça voilà ma réaction :

49447308

Le boulot est donc comme le dit la citation très illustrative, rendez ça propre. Et normalement, celui qui est passé avant vous devrait vous filer du code un peu près propre, et celui qui passera après vous aura un code encore plus propre. On partage notre code en communauté. C’est quasi communiste comme mode de pensée ahah…

Head in HandsNulle la blague.

 

Allez, conclusion hâtive (vachement même)

Je n’ai pas fini de lire le livre, certaines choses me dépassent encore, mais il est clair que c’est un ouvrage très intéressant à avoir dans sa bibliothèque ! 🙂

Je vous ai exposé les principales lignes, les plus importantes quoi, pour vous mettre l’eau à la bouche *splash*

BONUS (parce que je savais où le caser)

Code Simple de Beck (vu dans le livre) :

Par ordre de priorité, un code simple :

  • passe tous les tests ;
  • n’est pas redondant
  • exprime toutes les idées de conception présentes dans le système
  • minimise le nombre d’entités, comme les classes, les méthodes, les fonctions et assimilées

Pacman : allons plus loin

gamejava

Précédemment, nous avions vu comment dessiner Pacman et le faire déplacer. Cette fois, nous allons essayer de le déplacer à l’aide des flèches du clavier ! 🙂

Voici le code :

package Pacman;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
import javax.swing.JFrame;

public class Jeu extends JFrame implements KeyListener{

	private int compteur ;

	/* PACMAN COLORS */
	Color couleur1, couleur2;

	/* COORDINATES */
	public int x=10;
	public int y=30;

	/* DEFAULT COORDINATES */
	public final int X_INIT=10;
	public final int Y_INIT=30;

	/* DIRECTION */
	/*H : 1 B : 2 D : 3 G : 4*/
	public int direction = 0, nb;

	public boolean test=false;

	/* LIMITS */
	public final int X_MIN = 10;
	public final int X_MAX = 440;
	public final int Y_MIN = 30;
	public final int Y_MAX = 440;

	public Jeu(String titre, int largeur,int hauteur,int posX,int posY) {
		super(titre);
		setSize( largeur, hauteur );
		setVisible( true );
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setLocation(posX,posY);
		couleur2 = Color.yellow;
		addKeyListener(this);
	}

	/* METHODS KEYLISTENER */
	@Override
	public void keyPressed(KeyEvent e) {
		// TODO Auto-generated method stub
		switch (e.getKeyCode()){
			/* HAUT */
			case KeyEvent.VK_UP :
				//y=y-10;
				direction=1;
				System.out.println("HAUT");
				break;
			/* BAS */
			case KeyEvent.VK_DOWN :
				//ver = 3;
				//y=y+10;
				direction=2;
				System.out.println("BAS");
				break;
			/* DROIT */
			case KeyEvent.VK_RIGHT :
				//ver = 1;
				//x=x+10;
				direction=3;
				System.out.println("DROIT");
				break;
			/* GAUCHE */
			case KeyEvent.VK_LEFT :
				//ver = 4;
				//x=x-10;
				direction=4;
				System.out.println("GAUCHE");
				break;
			default :
				System.out.println(e.getKeyCode());

		}

	}

	@Override
	public void keyReleased(KeyEvent arg0) {
		// TODO Auto-generated method stub

	}

	@Override
	public void keyTyped(KeyEvent arg0) {
		// TODO Auto-generated method stub

	}

	/* METHOD ANIMATING PACMAN */
	public void animer (int nbr_mouvement){
		nb=nbr_mouvement;
		for (compteur=0; compteur<nb; compteur++) {
			this.repaint();
			try {
				Thread.sleep(100);//pause between each pics.
			}
			catch (InterruptedException e) {
				e.printStackTrace();
			}
			nb++; // INFINI

		}
	}
	/* DRAWING METHOD */
	public void paint (Graphics g){
		/* BACKGROUND */
		g.setColor( Color.white);
		g.fillRect(0,0,500,500);

		Graphics2D g2 = (Graphics2D)g;

		/* COLOR ALTERNING */
		if (compteur%2==0){
			couleur1 = Color.yellow;
		}else{
			couleur1 = Color.white;
		}
		/* DRAW PACMAN ACCORDING THE DIRECTION CHOSEN */
		if(direction==0){
			x=x+10;
			g.setFont(new Font("Serif",Font.ITALIC,50));
			g.setColor(Color.ORANGE);
			g.drawString("PACMAN",150,250);
			g.setFont(new Font("Serif",Font.ITALIC,20));
			g.drawString("by A.RAVAUX",150,270);
			g.setColor( couleur1);
			g.fillArc(x, y, 50, 50,0, 360);
			g.setColor( couleur2);
			g.fillArc(x,y, 50, 50, 30, 280);
			g.setColor(Color.DARK_GRAY);
			g.fillArc(x+25, y+5, 7,7,0, 360);
		}else if(direction==1){
			y=y-10;
			g.setColor( couleur1);
			g.fillArc(x, y, 50, 50,0, 360);
			g.setColor( couleur2);
			g.fillArc(x, y, 50, 50,135, 250);
			g.setColor(Color.DARK_GRAY);
			g.fillArc(x+10, y+20, 7,7,0, 360);

		}else if(direction==2){
			y=y+10;
			g.setColor( couleur1);
			g.fillArc(x, y, 50, 50,0, 360);
			g.setColor( couleur2);
			g.fillArc(x, y, 50, 50,240, -290);
			g.setColor(Color.DARK_GRAY);
			g.fillArc(x+10, y+20, 7,7,0, 360);
		}else if(direction==3){
			x=x+10;
			g.setColor( couleur1);
			g.fillArc(x, y, 50, 50,0, 360);
			g.setColor( couleur2);
			g.fillArc(x,y, 50, 50, 30, 280);
			g.setColor(Color.DARK_GRAY);
			g.fillArc(x+25, y+5, 7,7,0, 360);
		}else if(direction==4){
			x=x-10;
			g.setColor( couleur1);
			g.fillArc(x, y, 50, 50,0, 360);
			g.setColor( couleur2);
			g.fillArc(x, y, 50, 50,140, -280);
			g.setColor(Color.DARK_GRAY);
			g.fillArc(x+25, y+5, 7,7,0, 360);
		}
		if(x==X_MAX || y==Y_MAX || x<X_MIN || y<Y_MIN){
			g.setColor( Color.white);
			g.fillRect(0,0,500,500);
			g.setFont(new Font("Serif",Font.ITALIC,50));
			g.setColor(Color.ORANGE);
			g.drawString("PERDU !",160,250);
			System.out.println("PERDU");
			nb=0;
		}
	}
	public static void main(String[] args) {
		Jeu animation = new Jeu("Pacman", 500, 500,200,150);
		animation.animer(1);
	}
}

Commentons un peu ce code.
Tout d’abord, notre objectif principal est d’ajouter la possibilité de faire bouger le pacman avec les touches du clavier. Je vais donc faire appel à une interface très particulière qui écoute le clavier, c’est à dire qui va regarder sur quelles touches vous appuyez. Ainsi, par la suite, nous pourrons lancer des actions selon la touche appuyée. On implémente cette interface :

public class Jeu extends JFrame implements KeyListener{

Et on ajoute ces méthodes liées à cette interface :

	@Override
	public void keyPressed(KeyEvent e) {
		// TODO Auto-generated method stub
	}

	@Override
	public void keyReleased(KeyEvent arg0) {
		// TODO Auto-generated method stub

	}

	@Override
	public void keyTyped(KeyEvent arg0) {
		// TODO Auto-generated method stub

	}

J’ai ajouté des variables globales :

	private int compteur ;

	/* PACMAN COLORS */
	Color couleur1, couleur2;

	/* COORDINATES */
	public int x=10;
	public int y=30;

	/* DEFAULT COORDINATES */
	public final int X_INIT=10;
	public final int Y_INIT=30;

	/* DIRECTION */
	/*H : 1 B : 2 D : 3 G : 4*/
	public int direction = 0, nb;

	public boolean test=false;

	/* LIMITS */
	public final int X_MIN = 10;
	public final int X_MAX = 440;
	public final int Y_MIN = 30;
	public final int Y_MAX = 440;

Nous pouvons déjà deviner le rôle de certaines de ces variables. Le x et y sont bien entendu les coordonnées de pacman. couleur1 et couleur2 sont les couleurs du pacman, couleur2 est une couleur qui ne changera jamais, et qui est jaune.

Si vous avez lu l’article précédent sur pacman, vous avez pu reconnaître certaines parties du code très semblables. Entre autres le constructeur :

	public Jeu(String titre, int largeur,int hauteur,int posX,int posY) {
		super(titre);
		setSize( largeur, hauteur );
		setVisible( true );
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setLocation(posX,posY);
		couleur2 = Color.yellow;
		addKeyListener(this);
	}

Comme je vous le disais auparavant couleur2 est la couleur jaune. Le petite différence avec le constructeur de l’article précédent est qu’on a rajouté ceci : addKeyListener(this), c’est l’écoute du clavier.

Vous reconnaîtrez aussi la méthode animer(int nbr_mouvement) qui nous permettra d’animer Pacman :

	public void animer (int nbr_mouvement){
		nb=nbr_mouvement;
		for (compteur=0; compteur<nb; compteur++) {
			this.repaint();
			try {
				Thread.sleep(100);//pause between each pics.
			}
			catch (InterruptedException e) {
				e.printStackTrace();
			}
			nb++; // INFINI

		}
	}

La méthode animer() appelle la méthode repaint() qui redessine par desssus tout Pacman. A l’aide d’une boucle for, tant que le compteur est inférieur à nb , j’appelle donc repaint(). Seulement voilà, j’incrémente nb. Ainsi ma boucle est infinie et ne s’arrête jamais !! Enfin presque…Nous verrons ça plus loin.
Si vous êtes un lecteur aguerri et que vous avez pris le soin de lire l’article précédent, vous avez dû remarquer que ma façon de dessiner à l’infini la méthode repaint() est très différente. En effet, j’avais mis une condition if au lieu d’incrémenter :

		//on relance la méthode pour obtenir une boucle infinie !
		if(compteur==nbr_mouvement){
			compteur=0;
			x1=0;
			animer(48);
		}

Pas de panique, les deux méthodes sont bonnes, mais si j’ai choisi de créer une variable globale appelée nb qui reprend dans un premier temps la valeur passée en paramètre puis ensuite s’incrémente à l’infinie, c’est qu’il y a une bonne raison, et vous allez comprendre ça en lisant la suite de l’article 😀

Gérons maintenant les touches et le dessin du pacman selon la touche choisie.

Nous avions tout à l’heure parlé de l’implémentation de de l’écoute du clavier (keylistener) : implements KeyListener, maintenant occupons nous des méthodes liées à cette écoute :

/* METHODS KEYLISTENER */
    @Override
    public void keyPressed(KeyEvent e) {
        // TODO Auto-generated method stub
        switch (e.getKeyCode()){
            /* HAUT */
            case KeyEvent.VK_UP :
                //y=y-10;
                direction=1;
                System.out.println("HAUT");
                break;
            /* BAS */
            case KeyEvent.VK_DOWN :
                //ver = 3;
                //y=y+10;
                direction=2;
                System.out.println("BAS");
                break;
            /* DROIT */
            case KeyEvent.VK_RIGHT :
                //ver = 1;
                //x=x+10;
                direction=3;
                System.out.println("DROIT");
                break;
            /* GAUCHE */
            case KeyEvent.VK_LEFT :
                //ver = 4;
                //x=x-10;
                direction=4;
                System.out.println("GAUCHE");
                break;
            default :
                System.out.println(e.getKeyCode());
 
        }
 
    }
 
    @Override
    public void keyReleased(KeyEvent arg0) {
        // TODO Auto-generated method stub
 
    }
 
    @Override
    public void keyTyped(KeyEvent arg0) {
        // TODO Auto-generated method stub
 
    }

Lorsqu’on appuie sur une touche il y a trois évènements détectable : la touche est pressée, relachée et tapée.
La méthode keyPressed(KeyEvent e) gère les actions liée à la touche pressée, keyReleased(KeyEvent arg0) la touche relachée, et ,enfin, keyTyped(KeyEvent arg0) la touche tapée. L’utilité de distinguer ces trois évènements ? Imaginons que vous souhaitez détecter que votre utilisateur a bien touché la touche Shift/Majuscule avant d’appuyer sur la touche J…Ben c’est là qu’on va se servir de ces méthodes (en jouant avec un boolean par exemple).
Bon nous ce qui nous intéresse c’est keyPressed. On va retourner une valeur (direction) qui permettra ensuite de définir la forme du pacman.

En effet, dans la fonction paint on dessine le pacman selon la valeur direction, c’est-à-dire, si on va vers le bas, on dessine pas de la même façon notre pacman (la bouche vers le bas par exemple).

Dernier point, et ensuite je vous laisse vous amuser avec le code pour découvrir par vous même le dessin avec Swing.
Si le pacman touche les bords, nb prend la valeur 0 afin de sortir de notre boucle for (compteur=0; compteur<nb; compteur++) (de la méthode animer). En sortant de la boucle on arrête de redessiner. 🙂

        if(x==X_MAX || y==Y_MAX || x<X_MIN || y<Y_MIN){
            g.setColor( Color.white);
            g.fillRect(0,0,500,500);
            g.setFont(new Font("Serif",Font.ITALIC,50));
            g.setColor(Color.ORANGE);
            g.drawString("PERDU !",160,250);
            System.out.println("PERDU");
            nb=0;
        }

Voilà, voilà, à vos claviers !

BONUS

Télécharger le jeu (format .jar) 😀