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

Codeacademy, ou l’alternative à codeschool

Il n’y a pas très longtemps ma collègue décrivait son amour pour codeschool (c<>deschool). Mais à son plus grand désarroi, très peu de cours y sont gratuits, et les cours restent très chers !! Pour rappel, le concept de codeschool est d’apprendre à programmer en suivant intensivement les cours dispensés sur le site. Sont alors à votre disposition un émulateur d’éditeur de code et des vidéos. Vous apprenez donc pas à pas en tapant du code sur l’ « émulateur » et en regardant les vidéos. Après quelques recherches, j’ai pu constater que ce n’est pas la seule solution viable. Eh oui mes chers amis, il existe d’autres solutions et j’aimerai vous parler d’une d’entre elles qui me plaît beaucoup  car gratuite et simple. 🙂

Il faut cependant noter que contrairement à codeschool, code academy (ou codecacademy, ou codeacademy selon les envies des uns et des autres) ne propose aucun cours vidéos mais uniquement l’interaction avec un « émulateur » d’éditeur de texte. D’ailleurs, le site propose aux gens sur sa page principale de tester cet « émulateur ». 🙂 Ainsi vous serez à quoi vous attendre ! 🙂

codecademy-courses

Les cours dispensés sont les suivants :

  • Python
  • Ruby
  • JavaScript
  • HTML/CSS

Cela peut paraître peu voire dérisoire comparé à la liste de cours proposés par codeschool, mais tout d’abord il faut bien se mettre en tête que rien que ces cours là vous en avez pour un moment, d’autre part ils sont gratuits (ce n’est pas rien de le dire) et pour finir, l’équipe code academy travaille actuellement d’autres cours, ne vous leurrez pas, ils ne s’arrêteront pas en si bon chemin.En théorie, 12 semaines sont nécessaires pour apprendre un langage sur ce site, je dis bien en théorie. Il est certain que pour s’abandonner à ce genre de sites, il faut avoir du temps pour soi, mais cela vaut le coup, et je vous conseille Code Year. Ce dernier est un programme intensif (entendre par là : planning) conçu par code academy : Vous vous engagez à aller sur le site une fois par semaine (par exemple) et faire les exercices proposés.

badges

Code academy fonctionne sur un principe qui devient commun à tous ces sites de e-learning, principe même très fortement sponsorisé par Mozilla : les badges !
Quand on fait une avancée dans notre apprentissage nous gagnons un badge. 🙂 Il faut savoir que Mozilla œuvre pour la conception de badges universels qui seraient reconnu sur le web mais aussi en entreprise et sur le CV [1].  Moi je ne suis pas contre leur principe, tantôt il faudrait préciser que la valeur attribuée au badge sera moindre vis à vis d’un diplôme !

Dernière petite chose avant de vous laisser, les éditeurs utilisés par et sur code academy sont disponibles à cette adresse : http://labs.codecademy.com/#.

Prochainement, nous verrons un autre site de e-learning, je vous laisse dans l’ignorance le temps de fomenter un bel article ! 😀

P.S : J’ai volontairement mis le mot émulateur entre guillemets car ce ne sont pas des émulateurs, cependant, ce ne sont pas non plus de vrais éditeurs, tel qu’un éditeur de code installé sur votre PC/Macintosh/je-ne-sais-trop-quoi. 🙂

VOUS AVEZ ADORÉ ? VOUS ALLEZ RIRE MAIS CET ARTICLE VOUS INTÉRESSERA.

Code School , Cool ?

Bonjour jeunes (et moins jeunes) Gens !

En cette merveilleuse journée (nuit pour ma part) je vous propose de folâtrer du côté de code school et de ses cours , ma foi très bien réalisés .. Certes la plupart d’entre eux sont hélas payant, mais ça vaut, selon moi, le détour ! De plus, mes amis, réjouissons nous puisque certains de ses articles sont accessibles gratuitement 🙂 Pour ma part je n’ai jusqu’à maintenant testé uniquement Try Ruby mais celui-ci m’a plutôt convaincue de concert.

try-ruby-e5c4e60c3b82ce8d76f36cdbebd199f9

Essaie moi !

Ce qui m’a séduite ? ( Et Dieu sait que je ne suis pas facile à séduire … Il parait) Tout d’abord le design de la page , simple , soigné mais ludique. On n’a pas envie , comme sur certains sites du même acabit , de s’enfuir sous l’apparente complexité de la page, du vocabulaire, qui semble destiné uniquement à une élite intellectuelle … Ou en tout cas à plus intelligent que moi. Second point positif pour Try Ruby : son humour et sa lecture plaisante. Et clair ! Personnellement, je souriais comme une idiote devant mon Mac, heureuse d’un peu de douceur dans ce monde brut. Aaaah , comme un marshmallow qui fondrait dans la bouche … Je m’égare non ? Revenons en à nos moutons (ou bien présentement à nos Sheep) puisque nous arrivons au point noir de ce cours … Il est en anglais ! Enfin personne ne peut être parfait parait-il …

Concluons par l’efficacité : comme promis , en 15mn (ou un peu plus , je l’avoue) vous aurez appris les rudiments du Ruby. Comme je l’ai entendu quelque part : Efficace et pas cher. 

On m’a aussi conseillé Rails For Zombies …

Voilà !

Linux : les commandes


Je vous l’avais promis, voilà les commandes Linux !!! (Je compléterai au fur et à mesure du temps).

Télécharger le PDF

CheatSheet – Commandes Linux


Remarque : J’utilise le gestionnaire APT (apt-get…)

Pour être bref et concis, apt-get est un logiciel qui s’utilise sous votre terminal (en ligne de commande donc) vraiment très simple à utiliser qui permet la gestion des paquets. Autrement dit : il permet d’installer, de désinstaller, de mettre à jours vos logiciels. Ce n’est pas le seul gestionnaire, mais c’est le plus connu et le plus usité et utilisé. Sur fedora vous rencontrerez YUM, qui s’utilise quasiment de la même façon à quelques petites différences près (yum install <nom du paquet>). Rendez vous sur cet URL pour en savoir plus.


Linux : les commandes

Commandes régulières

ls Liste des fichiers du répertoire

cd Déplacement dans l’arborescence des fichiers

Exemple : cd /etc Positionnement sur le répertoire etc

cd .. Positionnement sur le répertoire précédent

pwd Nom du répertoire courant

mkdir prog Création du répertoire prog

Aide

man Obtenir les informations sur une commande dans le manuel
Exemple : man ls >> Plus d’infos sur la commande ls

help Obtenir de l’aide sur une commande interne au shell

apropos et whatis brève description de la commande

Écran

clear « efface » ce que vous voyez sur votre terminal

reset efface ce que vous voyez sur votre terminal

less et more « réduire » l’affichage sur votre écran, pour prendre le temps de tout lire.

Éditeurs de texte

ed ,vi, emacs
Ces trois commandes peuvent être précédés soit d’un nom de fichier existant :
vi prog.c édition du fichier prog.c
emacs prog.c édition du fichier prog.c

Fichiers & répertoires

ls -l Liste des fichiers en affichant les droits

ls -a Liste des fichiers en affichant les fichiers cachés (indiqués par un point ex : .toto)

ls -i Liste des fichiers en affichant les inodes de ces fichiers

rmdir prog Effacement du répertoire prog s’il est vide !

rmdir -rf prog Effacement du répertoire prog (r pour récursive, et f pour force)

cp prog1.c prog2.c Copie du fichier prog1.c dans prog2.c. Si prog2.c n’existe pas il va créer prog2.c. L’inode de prog2.c sera différent de prog1.c.

rm prog1.c Effacement du fichier prog1.c. A éviter : rm -rf /

mv prog1.c prog2.c Renommage ou déplacement du fichier prog1.c en prog2.c

Exemple : mv prog1.c ../toto/prog2.c/ copie prog1.c dans un autre répertoire sous le nom de prog2.c (Le slash en rouge est obligatoire, on « indique » que c’est un répertoire).

stat permet d’afficher les caractéristiques de base de fichier(s)

touch permet de modifier les caractéristiques de dates de fichier(s). Cette commande permet également de créer un (ou des) fichier(s) vide(s)

Exemple : touch fichier.txt Crée le fichier vide fichier.txt s’il n’existe pas, sinon change la date de dernière modification du fichier.

file permet de déterminer la convention de structure que respecte le contenu du fichier (donc son type applicatif)

Manipulation de texte

wc prog.c Nombre de lignes, de mots, de caractères, du fichier prog.c

cat prog.c Affiche le contenu du fichier prog.c.

cat fichier1 fichier2 Affiche le contenu du fichier1 puis de fichier2. C’est une concaténation.

cat > toto On va pouvoir écrire dans le fichier toto, puis pour sortir du mode texte en appuyant

sur Ctrl+D.

cat > toto << n'importe quoi On va pouvoir écrire dans le fichier toto, puis pour sortir du mode texte au lieu de faire Ctrl+D, il suffira de taper « n’importe quoi » (exemple : cat > titi << eof, vous écrivez « eof », et à ce moment là vous sortez du mode édition).

cat a.txt >> b.txt Copie du fichier a.txt au bout du fichier b.txt.

grep Affiche les lignes qui contiennent une expression régulière donnée, egrep (grep étendu)

est plus riche en possibilités.

Exemple : grep « main» » prog.c Affiche toutes les lignes du fichier prog.c contenant main.

cmp a.txt b.txt Compare deux fichiers.

diff a.txt b.txt Affiche les différences entre les deux fichiers.

head fichier.txt Affiche les dix premières lignes de fichier.

head -n 5 fichier.txt vous permettra d’afficher uniquement les 5 premières lignes.

head fichier1 fichier2 Affiche les dix premières lignes de fichier1 puis les dix premières de fichier2 (même principe pour tail fichier1 fichier2).

tail fichier.txt Affiche les dix dernières lignes. De la même manière qu’avec head, tail -n 5 fichier.txt affichera les 5 dernières lignes.

Lire un pdf à partir du terminal X.

Une commande qui devrait vu plaire : ouvrir le visionneur de pdf à partir du terminal.

C’est exactement la même procédure que pour ouvrir votre navigateur ou emacs : <nom du paquet> <nomdufichier>.pdf (ajouter & si vous souhaitez le lancer en arrière plan). Le problème est de savoir quel visionneur est installé ! Sous ubuntu, généralement, il s’agit d’evince (evince fichier.pdf &). Mais il en existe plein d’autres ! Pour vérifier qu’il est bien installé, entrez cette commande : apt-cache policy evince |grep Installé . Vous saurez alors si le logiciel est installé. S’il ne l’est pas, entrez cette commande : sudo apt-get install evince. (Remarque : Il s’agt de la commande valable pour debian et ses dérivés, à vous de « traduire » si vous a vez une autre distribution, par exemple sur fedora ce sera yum install evince). Mais rien ne vous empêche d’en installer un autre !

Voici une liste des visionneurs disponibles :

  • Evince : le visionneur de documents de GNOME (avec intégration à Firefox).
  • Okular : le visionneur de documents de KDE.
  • Adobe Acrobat Reader : pas la peine de le présenter lui, cher windowsiens.
  • ePDFView : un visionneur de documents PDF libre et léger.
  • xpdf : visionneur de PDF très léger.
  • Foxit Reader
  • pdfcube : visualiseur de PDF avec effets 3D (pdfcube).

Permissions, etc.

chmod a+r fich.htm Permission de lecture pour tous du fichier fich.htm

sort fich.txt Tri du fichier fich.txt.

who : Pour connaître qui est présent sur le terminal

  • who -r : Même chose que runlevel
  • who -b : date de dernier boot (basé sur /proc/uptime1)

who am i Voir quel est le login initial

runlevel donne le niveau d’exécution du système.

Processus

kill Envoyer un message à un processus donné, généralement pour y mettre fin.

Exemple : kill % 1 ou kill 1640 (1640 est ici le PID d’un processus lancé).

Remarque : ^Z (Ctrl+Z) Arrêt du processus

Recherche

find Recherche, à partir d’un répertoire, de fichiers ayant des caractéristiques données.

Les brèves de nerdycode


Python pour tous

Python est un langage de progrmmation assez utilisé. Très utile d’ailleurs pour faire des scripts, il vous propose de nombreuses possibilités, découvrez les en lisant un de ces livres entièrement gratuit. Pour ma part, je vous conseille les livres de Gérard Swinnen : un standard. Pour les consulter c’est par ici.

Cours magistral sur UNIX disponible

En fouillant un peu sur le net, j’ai trouvé un cours sur UNIX (intéressant sur certains points) . Je continuerai à partager, à l’avenir, avec vous quelques liens URL sur ce sujet chaud brulant comme toujours. Bien évidemment, nombreux sont les documents qui portent sur le même sujet : « Débuter sur un UNIX », « Lignes de commande »… Je ferais du tri si j’en ai le temps.

Si Linux vous intéresse, vous pouvez lire mon article-phare sur ce sujet. 🙂

CSS is beautiful

Remerciez Squier pour ce lien URL trouvé aujourd’hui. Sur ce site, vous y trouverez multiples exemples démontrant la puissance du CSS.

Ninn : Une fenêtre Java avec un JTextArea

Introduction

Je vous en parlais dans la brève d’aujourd’hui, nous allons bientôt démarrer le développement de Ninn fin Septembre si tout se passe bien. Nous allons partager avec vous ce mois-ci un code en java qui servira de base au développement de Ninn. (Nous avons de grands projets pour Ninn 🙂 ).

Java 

Pour exécuter ce code, veuillez avoir installer l’environnement Java (JRE et JDK). Pour comprendre ce code servez vous des commentaires ainsi de l’article proposé en fin d’article. 🙂

 
 

package Ihm;
import java.util.*;
//on importe tout le contenu de la bibliothèque avec
//cela évite d'importer un par un les éléments de la bibliothèque swing
import javax.swing.*;
/*je suis obligé de faire appel à AWT car j'en ai besoin pour gérer les 'layouts manager'
(gestionnaires de placement)
*/
import java.awt.*;
import java.awt.event.*;

//la classe hérite de JFrame (extends)
class mainwindow extends JFrame
//On maintenant construit la fenêtre
{
/*variable privée : variable accessible uniquement dans la classe
on déclare ces variables qui vont être utilisés dans le constructeur avant
avantage de le déclarer en dehors du constructeur :
utilisable partout dans la classe mainwindow*/

//Container, contient tous les autres objets tel que JButton
private JPanel panel = new JPanel();

//barre de menu
private JMenuBar menubar = new JMenuBar();

//Menu
private JMenu file = new JMenu("File");
private JMenu edition = new JMenu("Edit");
private JMenu about = new JMenu("A propos");

//Items
private JMenuItem sauvegarder = new JMenuItem("Save");
private JMenuItem quitter = new JMenuItem("Quit");
private JMenuItem license = new JMenuItem("License");

//fontsize sera un item de : edition et aura plusieurs items
private JMenu fontsize = new JMenu("Font Size");
private JMenuItem size12 = new JMenuItem("12");
private JMenuItem size36 = new JMenuItem("36");
//Zone de texte
private JTextArea text = new JTextArea("");
//constructeur
public mainwindow()
{            //titre de la fenêtre
setTitle("NINN");
//taille de la fenêtre
setSize(990,560);
setResizable(true);
//affiche la fenêtre au centre de l'écran
setLocationRelativeTo(null);
//cadre de la fenêtre
//true : cadre
//false : sans cadre
setUndecorated(false);
// ferme la fenêtre
//si on ne met pas ça en réalité la fenetre n'est pas fermée elle a juste "disparue"
setDefaultCloseOperation(EXIT_ON_CLOSE);

//----------------
setJMenuBar(menubar);
menubar.add(file);
menubar.add(edition);
menubar.add(about);
file.add(sauvegarder);
file.add(quitter);
edition.add(fontsize);
fontsize.add(size12);
fontsize.add(size36);
about.add(license);

//----------------

//raccourcis clavier
sauvegarder.setMnemonic('S');
// getKeyStroke to get the KeyChar
sauvegarder.setAccelerator(KeyStroke.getKeyStroke (KeyEvent.VK_S,InputEvent.CTRL_MASK));
quitter.setMnemonic('Q');
quitter.setAccelerator(KeyStroke.getKeyStroke (KeyEvent.VK_Q,InputEvent.CTRL_MASK));

//----------------

//quand on clique sur quitter, l'application se ferme
//pour sauvegarder
sauvegarder.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent arg0) {
JOptionPane.showMessageDialog(panel, "La fonction sauvegarder n'existe pas encore" );
}
}
);
//pour quitter Ninn
quitter.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent arg0) {
System.exit(0);}
}
);
//la licence d'exploitation de Ninn
license.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent arg0) {
JOptionPane.showMessageDialog(panel, "GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 Copyright (C) 2007 Free Software Foundation, Inc. http://fsf.org/" );
}
}
);
//pour modifier la taille du texte
size12.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent arg0) {
Font twelve = new Font("Arial", Font.PLAIN,12 ); // 12
text.setFont(twelve);
}
}
);
size36.addActionListener(new ActionListener(){
public void actionPerformed(ActionEvent arg0) {
Font twelve = new Font("Arial", Font.PLAIN,36 ); // 36
text.setFont(twelve);
}
}
);

//----------------

//on appelle ceci un layout manager et ceci est un objet de la bibliothèque AWT
panel.setLayout(new BorderLayout());
//panel.add(bouton, BorderLayout.NORTH);
panel.add(text, BorderLayout.CENTER);
this.setContentPane(panel);

//----------------

//autorise le retour à la ligne
text.setLineWrap(true);

}
}
//classe principale 'window'
public class window {

/**
* @param args
*/
//méthode prncipale main (static void)
public static void main(String[] args) {
// TODO Auto-generated method stub
//objet de type JFrame, on place sa référence dans window
//On va construire la fenêtre en faisant appelle à la classe mainwindow();
JFrame window = new mainwindow();
//rendre visible la fenêtre
window.setVisible(true);

}

}

VOUS AVEZ ADORÉ ? VOUS ALLEZ RIRE MAIS CET ARTICLE VOUS INTÉRESSERA.

En passant

Les brèves de nerdycode


Création d’une nouvelle rubrique : Les brèves de nerdycode

Après constaté que je pouvais consacré un peu de mon temps pour des articles rapides, je vous propose cette rubrique. Cette dernière comportera des nouvelles plus ou moins brèves, ou des articles dans le vif du sujet.

Vous reconnaîtrez ce type d’articles par le logotype ici présent —>

Le projet Ninn

Début du projet Ninn : 30 Septembre 2012 normalement.

Ninn sera un éditeur de texte écrit en Java, nous commençons bientôt le développement de l’applicatif. Il sera normalement diffusé en version code source libre et gratuit. Dans la continuité du projet, je partagerais avec vous un code source qui fera office de base au code du programme Ninn. Par respect de l’auteur, veuillez ne pas piquer le nom choisi pour l’application en cours de développement.

Creation of a new section : brief news from nerdycode

After a moment while writing a lot of expeditious articles, I decided to create the « brief news form nerdycode », where Serial and me will write very short articles or non-important articles.

Ninn project

Beginning of the project : 09/30/12. Normally.

Ninn will be an editor written in Java (so normally, running everywhere according to the theory). We’re startin’ the development soon, and it will be diffused as free software. So, I’ll share with you the source code in Java which will help me to build Ninn. Be nice, don’t copy the name I found for my soft.

En passant

Fedora 17 : The Beefy Miracle

Ecrit à partir de mon HP Pavilion Entertainment PC tournant sur Fedora 17 :
Ayant été un peu déçu par la version 12.04 LTS d’ubuntu qui n’est pas supporté par mon vieil laptop, je passe aux choses sérieuses : Installation d’un nouvel OS. après m’être frotté brèvement à debian où je n’ai pas dépassé le stade de l’installation (car Môssieur Debian ne voulait pas reconnaître ma borne wifi, mais ça c’est une autre histoire), je me suis tourné vers un vieux fantasme de gamin : Fedora !
Distribution tant utilisée dans les écoles (d’informatique précisons-le), à l’instar des deux autres distributions cités dans ce post, mon envie de l’installer, de le tester et d’apprendre avec joie les lignes de commande est dû aussi au fait que mon subconscient me fait dire que c’est le petit frère de RedHat (chers développeurs, ne m’en veuillez pas de l’appeler petit alors qu’il a tout d’un grand).
Peut être qu’un jour avec un peu de sous, je m’essaierai à RedHat et sa super certification. Un jour… J’en suis loin moi et mes ls, cd, mkdir….
Bref, il est arrivé le miracle énorme.
N.B : En choisissant d’installer avec les paquets « bureautique », j’ai fait l’énorme bétise de me priver des outils de développements. Je me dois de réparer ce manque d’outils par une installation manuelle. je dis ça au cas ou je vous aurai convaincu de l’installer…

Example of static webpage.


 
The HTML source

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300,300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Butterfly+Kids' rel='stylesheet' type='text/css'>
<style>
body
{
background-image:url(images/subtle-pattern-1.jpg);
}
</style>
</head>
<body>
<header id="header">
<p>
Cerf-volant
</p>
</header>
<nav id="nav">
<ul>

<li>
Menu
</li>

<li>
<a href="#">Acceuil</a>

</li>

<li>
<a href="#">Boutique</a>
<ul>
<li><a href="#">Cerf-volants</a></li>
<li><a href="#">Kite-surf</a></li>
</ul>
</li>

</ul>

</nav>
<div id="menu">
<a href="#">Acceuil</a>

<a href="index2.html">Boutique</a>

<a href="index3.html">Evenement</a>

<a href="index3.html">Blog</a>

<a href="index4.html">Contact</a>

</div>
<div id="content">
<article>
<h1>Title 1</h1>
<table>
<tr>
<td><img src="images/kite.gif"/></td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
</td>
</tr>
</table>

<h1>Title 2</h1>
<img src="images/kite2.gif" style="position: absolute; margin: 10px 20px 0px 0px;float:left;width: 200px; height: 400px"/>
<p style="padding-left:210px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna. Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
</p>
</article>
<footer>
<a href="#">Cerf-volant</a> | Ne marche pas sur Internet Explorer, veuillez utiliser un autre navigateur : <a href="http://www.mozilla.org/fr/firefox/fx/" alt="Téléchargez Mozilla">Mozilla</a>, <a href="https://www.google.com/intl/fr/chrome/browser/?hl=fr&brand=CHMB&utm_campaign=fr&utm_source=fr-ha-emea-fr-sk&utm_medium=ha" alt="Téléchargez Chrome">Chrome</a>, <a href="http://fr.opera.com/" alt="Téléchargez Opera">Opera</a>...
</footer>
</div>

</body>
</html>

 
The CSS source

			body
				{
					background-image:url(images/subtle-pattern-1.jpg);
					font-family:'Open Sans', Arial, Lucida Grande;
				}
			#header
				{
					/*largeur minimale*/
					min-width:952px;
					/*largeur : automatique*/
					width:auto;
					/*position*/
					position:relative;
					/*arrière plan*/
					background: #87e0fd; /* Old browsers */
					background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  #87e0fd 0%,#05abe0 #05abe0100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  #87e0fd 0%,#05abe0 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  #87e0fd 0%,#05abe0 100%); /* IE10+ */
					background: linear-gradient(to bottom,  #87e0fd 0%,#05abe0 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */

					/*bordure en bas*/
					border-bottom:1px solid #e5e5e5;
					/*hauteur*/
					height:190px;
					/*marges intérieures*/
					padding-top:26px;
					padding-left:25px;
					padding-bottom:25px;
					/*marges extérieures*/
					margin-top : -5px;
					margin-left : -8px;
					margin-right : -8px;
					overflow: hidden;

					vertical-align: baseline;

				}
			#header p{
					font-family: 'Butterfly Kids', cursive;
					font-size:40px;
					color:#ffffff;
					text-shadow: 0px 2px 0px grey;
					margin-top:150px;
			}

			#menu /* Ensemble du menu */
				{
					position:relative;
					/*marge extérieure uniquement à gauche*/
					padding-left:30px;
					/*marges extérieures*/
					margin-left : -8px;
					margin-right : -8px;

					/*text-align : left; */
					font-family : 'Open Sans', Arial;
					font-size : 14px;
					line-height : 36px;

					min-width:952px;
					width:auto;
					position:relative;
					background : #333333 ;
					overflow:none;
				}

			#menu a /* Contenu des listes */
				{
					display : inline-block; /* on change le type d'élément, les liens deviennent des balises de type block */
					padding : 0; /* aucune marge intérieure */
					margin:0;
					background : #333333 ; /* couleur de fond */
					color : #fff; /* couleur du texte */
					text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
					width : 140px; /* largeur */
					height : 40px;

				}
			#menu a:hover
				{

					text-decoration:underline;
					font-size:20px;

				}
			#nav{
				position: fixed;
				left: -39px;
				margin-top: 25px;
				color: #000000;
				}
			#nav li {
				/* on annule la puce par défaut */
    			list-style-type: none;
    			display : block;
				text-align: center;
				text-decoration : none;
				margin-top:auto;
				color:#000000;
				/* Mozilla */
				background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
				/* Chrome,Safari4+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
				/* Chrome10+,Safari5.1+ */
				background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc #cccccc 100%);
				/* Opera 11.10+ */
				background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
				/* IE10+ */
				background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
				/* W3C */
				background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%);
				/* IE6-9 */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
				width : 185px; /* largeur */
				height : 50px;
				}
			#nav li a{
				display : block;
				text-align: center;
				text-decoration : none;
				margin-top:auto;
				color:#000000;
				background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
				width : 185px; /* largeur */
				height : 50px;
				}
			#nav li a:hover{
				text-decoration:none;
				background: -moz-linear-gradient(top, #aaeeff 0%, #1a90a1 100%);
				width : 185px; /* largeur */
				height : 50px;
				}

			#nav li ul /* Sous-listes */
				{
       			position: relative;
       			/* Largeur des sous-listes */
        		width: 144px;
        		/* Masquer les sous-liste du champ de vision */
        		left: -999em;
        		border-radius:5px 5px;
				}

			#nav li ul a /* Eléments de sous-listes */
				{
 					border-radius:5px 5px;
 					background: rgb(238,238,238);
				}
			#nav li ul a:hover/* Eléments de sous-listes */
				{
 					border-radius:5px 5px;
				}
			#nav li:hover ul /* Sous-listes lorsque la souris passe sur le menu */
				{
        		/* Repositionnement */
        		left: -40px;
        		/* Au cas ou il y aurait un probleme */
        		min-height: 0;
				}

			#content
				{
				position:relative;
				background : #ffffff;
				padding-top:3px;
				padding-left:30px;
				margin-left : 180px;
				padding-right:30px;
				margin-right : 180px;
				padding-bottom: 3px;
				min-width:290px;
				max-width:1300px;
				height : 1500px;
				max-height : auto;
				text-align: justify;
				font-size:12px;
				}
			footer{
				position:relative;
				/* Old browsers */
				background: #a90329;
				/* Mozilla */
				background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);
				/* Chrome,Safari4+ */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(100%,#6d0019));
				/* Chrome10+,Safari5.1+ */
				background: -webkit-linear-gradient(top,  #a90329 0%,#6d0019 #6d0019100%);
				/* Opera 11.10+ */
				background: -o-linear-gradient(top,  #a90329 0%,#6d0019 100%);
				/* IE10+ */
				background: -ms-linear-gradient(top,  #a90329 0%,#6d0019 100%);
				/* W3C */
				background: linear-gradient(to bottom,  #a90329 0%,#6d0019 100%);
				/* IE6-9 */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );

				color:#ffffff;
				height: 50px;
				min-width: auto;
				width:970px;
				top:500px;
				margin-top:5px;
				left:282px;
				padding-top: 8px;
				padding-left:30px;
				border-radius:5px 5px;
				-moz-border-radius:5px 5px;
				-webkit-border-radius:5px 5px;
			}
			footer a{
				color:#ffffff;
			}
			footer a:hover{
				font-size:30px;
			};