CrEv's blog - Mot-clé - devDe tout de rien, de l'info, de la cuisine, des motos2013-02-09T09:04:53+01:00urn:md5:89402921f17183133600b70e4b7a2730DotclearEcrire une page web de nos jours, suite des aventuresurn:md5:4ef8e9872957821cd4413c0741fdb8952012-12-06T12:26:00+01:002012-12-06T12:26:23+01:00CrEvDevelcoffeescriptdevgithtmlruby<p>Il faut croire que l'<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/Ecrire-une-page-web-de-nos-jours">épisode précédent</a> vous a intéressé (mon petit doigt me dit qu'il est même passé sur un <a href="http://linuxfr.org/board">incubateur d'excellence</a> aux dires des <a href="http://fr.wikipedia.org/wiki/Mytiloida">mytiloïdes</a> qui s'y trouvent). Voici donc la suite tant attendue.</p>
<blockquote>
<p> Comment ça une suite ?</p>
</blockquote>
<p>Ben vous croyez quoi ?! On fait de la page oueb monsieur ! C'est un sujet sérieux ! Pas question de s'arrêter avec juste un peu de <a href="http://haml.info/">Haml</a>, <a href="http://sass-lang.com/">Sass</a>, <a href="http://www.ruby-lang.org/fr/">Ruby</a>, <a href="http://rake.rubyforge.org/">Rake</a> et <a href="http://git-scm.com/">git</a>. Cela suffirait à des <a href="http://www.php.net">développeurs inexpérimentés</a>, pas pour des <a href="http://www.ruby-lang.org/fr">vrais bons comme nous</a> !</p> <h1>Introduction</h1>
<blockquote>
<p>Et il va nous sortir quoi de son chapeau ce bon monsieur ? Le problème il était de faire une page internet^W oueb statique hein !</p>
</blockquote>
<p>Que des choses indispensables pour briller en société ! En l'occurence l'utilisation de <a href="http://gembundler.com/">bundler</a> et <a href="https://github.com/guard/guard">guard</a> et, histoire d'aller un peu plus loin, un peu de <a href="http://coffeescript.org/">coffeescript</a> parce qu'on le mérite bien.</p>
<h1>Bendleure</h1>
<p>Comme vous avez pu le remarquer, la génération de votre page <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> nécessitait l'utilisation de plusieurs <a href="http://rubygems.org/">gem</a> <a href="http://www.ruby-lang.org/fr/">ruby</a> en l'occurrence :</p>
<ul>
<li><a href="http://haml.info/">haml</a></li>
<li><a href="http://sass-lang.com/">sass</a></li>
</ul>
<p>Il était donc nécessaire de réaliser deux actions manuelles pour les installer. Mais les commandes c'est surfait, tout le monde le sait !</p>
<p>Heureusement <a href="http://gembundler.com/">bundler</a> est là pour nous ! Tout d'abord, étant donné que c'est également une <a href="http://rubygems.org/">gem</a>, il faut l'installer :</p>
<pre><code>gem install bundler
</code></pre>
<p>Ha oui, je vous vois venir !</p>
<blockquote>
<p>Oué mais l'autre il nous dit qu'on va supprimer l'installation manuelle des <a href="http://rubygems.org/">gem</a> et il ne trouve rien de mieux à faire que d'installer une nouvelle <a href="http://rubygems.org/">gem</a> !</p>
</blockquote>
<p>Et là de répondre :</p>
<blockquote>
<p>C'est pas faux</p>
</blockquote>
<p>D'ailleurs, vous allez même créer un nouveau fichier, <code>Gemfile</code> qui contiendra le code suivant :</p>
<pre><code>source 'https://rubygems.org'
gem 'haml'
gem 'sass'
</code></pre>
<p>Vous pouvez désormais installer ces deux <a href="http://rubygems.org/">gem</a> via la commande :</p>
<pre><code>bundle
</code></pre>
<p>C'est 'achement plus facile, non ?</p>
<p>Cette commande va vous installer les deux <a href="http://rubygems.org/">gem</a> si vous ne les aviez pas déjà et va créer un fichier <code>Gemfile.lock</code> qui contient les installations réalisées et leur version. Si un tel fichier n'existe pas, <a href="http://gembundler.com/">bundler</a> va essayer de récupérer la dernière version des <a href="http://rubygems.org/">gem</a>. Si un fichier lock existe déjà, il va essayer d'installer la version spécifiée dans le fichier. L'avantage est que si vous partagez ce fichier entre vos différents environnements (par exemple en le versionnant dans votre <a href="http://git-scm.com/">git</a>) il vous assure d'avoir les mêmes dépendances partout. Et ça <a href="http://en.wikipedia.org/wiki/Dependency_hell">c'est bien</a> !</p>
<p>Développer votre page statique est donc d'autant plus aisée qu'il vous suffit de faire un clone de votre <a href="http://git-scm.com/">git</a> et d'exécuter <a href="http://gembundler.com/">bundler</a> (de toute façon, qui n'a pas <a href="http://gembundler.com/">bundler</a> sur sa machine aujourd'hui ?).</p>
<h1>Moins j'en fait, mieux je me porte !</h1>
<p>Etant donné que vous êtes une vrai <a href="http://fr.wikipedia.org/wiki/D%C3%A9veloppeur">feignasse</a>, vous n'avez surtout pas envie de devoir relancer <a href="http://rake.rubyforge.org/">rake</a> à chaque modification réalisée (car le temps gagné pourra être passé à mouler^W faire sa <a href="https://linuxfr.org/tags/veille_technologique/public">veille technologique</a>).</p>
<p>La première chose est donc d'ajouter <a href="https://github.com/guard/guard">guard</a> a votre <code>Gemfile</code> (vous voyez que finalement ça sert à quelque chose <a href="http://gembundler.com/">bundler</a>) et l'installer via <code>bundle</code>.</p>
<pre><code>gem 'guard'
</code></pre>
<p>La deuxième chose est d'initialiser <a href="https://github.com/guard/guard">guard</a>. Une bonne pratique est de toujours utiliser <a href="http://gembundler.com/">bundler</a> pour exécuter <a href="https://github.com/guard/guard">guard</a>. Vous n'allez donc pas exécuter <code>guard init</code> mais</p>
<pre><code>bundle exec guard init
</code></pre>
<p>Ceci va vous créer un fichier <code>Guardfile</code> qui va bien (mais qui ne fait rien).</p>
<p>Je vous conseil d'aller voir la documentation de <a href="https://github.com/guard/guard">guard</a> car un certain nombre d'usages classiques sont déjà supportés et leur mise en oeuvre est vraiment simple.
Dans notre cas, on utilise <a href="http://rake.rubyforge.org/">rake</a> pour construire notre page statique. Tout naturellement nous allons donc nous tourner vers le plugin <a href="https://github.com/guard/guard-rake">guard-rake</a>.</p>
<p>Dans le <code>Gemfile</code> rajouter</p>
<pre><code>gem 'guard-rake'
</code></pre>
<p>et exécuter <code>bundle</code>.</p>
<p>Ensuite, initialiser le <code>Guardfile</code> avec <a href="https://github.com/guard/guard-rake">guard-rake</a> :</p>
<pre><code>bundle exec guard init rake
</code></pre>
<p>Vous devez donc avoir un fichier <code>Guardfile</code> qui contient</p>
<pre><code>guard 'rake', :task => 'build' do
watch(%r{^my_file.rb})
end
</code></pre>
<p>J'espère que vous avez déjà compris ce que ça voulait dire : lorsque le/les fichiers surveillés par <code>watch</code> seront modifiés, <a href="http://rake.rubyforge.org/">rake</a> sera executé avec la cible <code>build</code>. Parfais, c'est exactement ce qu'on cherche à faire !</p>
<p>Il ne reste donc plus qu'à modifier un peu le <code>watch</code> pour que ça corresponde à notre cas :</p>
<pre><code>guard 'rake', :task => 'build' do
watch %r{^index.haml$}
watch %r{^css/(.+)\.sass$}
end
</code></pre>
<p>De cette manière, dès que <code>index.haml</code> ou l'un des fichiers <a href="http://sass-lang.com/">sass</a> va être modifié, <a href="http://rake.rubyforge.org/">rake</a> va être exécuté.</p>
<p>Faisons un petit test. Tout d'abord il convient de lancer <a href="https://github.com/guard/guard">guard</a> :</p>
<pre><code>bundle exec guard
</code></pre>
<p>Et voilà !
A chaque fois que vous modifierez un des fichiers surveillés, la sortie sera regénérée ! Le gain en terme de confort est loin d'être négligeable, c'est vraiment un plus pour développer correctement une page oueb statique !</p>
<h1>L'inter a ctivité</h1>
<p>Comme on est pas des <a href="http://concours.livre-css3.fr/jeu.php?mode=voter#realisations">mickeys</a> on va faire les choses en grand : on va rajouter un peu d'interactivité et de fun dans cette page tristounette !</p>
<p>Pour ce faire, on va rajouter un peu de code côté client. Mais bon, tout le monde le sait, le javascript c'est has been. On va donc le faire en <a href="http://coffeescript.org/">coffeescript</a> !</p>
<p>Tout d'abord, créer un répertoire <code>js</code> (oui, js, pas coffee) et dedans un fichier <code>mickey.coffee</code>.</p>
<p>Dans ce fichier, écrire le contenu suivant :</p>
<pre><code>init = ->
img = document.createElement 'img'
img.src = "data:image/png;base64,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"
img.style.position = 'absolute'
img.style.top = '-1000px'
img.style.left = '-1000px'
document.body.appendChild img
window.onmousemove = (e) ->
img.style.left = "#{e.clientX + 10}px"
img.style.top = "#{e.clientY + 10}px"
init()
</code></pre>
<p>Bon, c'est bien joli mais comment on l'intègre ?</p>
<p>Déjà, on va rajouter la <a href="http://rubygems.org/">gem</a> qui va bien à bundler :</p>
<pre><code>gem 'coffee-script'
</code></pre>
<p>Puis l'installer :</p>
<pre><code>bundle
</code></pre>
<p>Ensuite, il faut compiler le tout en javascript. Dans le fichier <code>Rakefile</code> ajouter en tête</p>
<pre><code>require 'coffee-script'
</code></pre>
<p>Et ajouter à la tâche <code>:build</code> :</p>
<pre><code>js = CoffeeScript.compile File.read("js/mickey.coffee")
File.open("_site/mickey.js", "w") { |f| f.write(js) }
</code></pre>
<p>Enfin, appeler le script dans la page web. Pour ce faire, ajouter une balise script pointant vers <code>mickey.js</code> à la fin du fichier :</p>
<pre><code>%script(src="http://www.winsos.net/~yves/index.php?post/2012/12/06/mickey.js")
</code></pre>
<p>Il reste une dernière petite chose à faire, l'ajouter au <code>Guardfile</code></p>
<pre><code>watch %r{^js/mickey\.coffee$}
</code></pre>
<p>Désormais c'est fait ! Vous avez donc une super animation de haute voltige sur votre page web statique !</p>
<h1>Conclusion</h1>
<blockquote>
<p>It's time to kick ass and chew bubble gum, and I'm all outta gum !</p>
</blockquote>
<p>Et voilà, tout roule. Vous avez <strong>enfin</strong> une page web statique de <a href="http://fr.wikipedia.org/wiki/Bullshit">très haut niveau</a>. A ce stade vous pouvez travailler <a href="http://fr.wikipedia.org/wiki/Ssii">parmis les meilleurs</a> et vous avez désormais une justification pour <a href="http://www.lemonde.fr/technologies/article/2010/08/18/france-fr-un-site-de-4-millions-d-euros_1399998_651865.html">le prix de vos oeuvres d'art</a>.</p>
<p>Et sinon, ben vous aurez juste eu l'occasion de découvrir certaines technologies plutôt cool au travers d'une réalisation totalement inutile ;)</p>
<p>Les sources utilisées sont disponibles sur <a href="https://github.com/CrEv/web_page_today">un dépôt github</a> et le résultat tant attendu est <a href="http://www.winsos.net/web_page_today/">visible</a></p>Ecrire une page web de nos joursurn:md5:3bf39ebb4f81113d1bc46415cc8c8fcb2012-12-04T07:56:00+01:002012-12-04T08:59:37+01:00CrEvDeveldevgithtmlrubysass<p>Edit: allez voir en fin d'article, il y a du bonus !</p>
<p>J'aurais aussi pu l'appeler <em>Le html c'est surfait !</em></p>
<p>Ces derniers jours, je me suis mis à la création d'une page web. En gros, il s'agit d'une simple page, totalement statique (pas de code serveur ni de code côté client). Allez, on va quand même mettre un peu de <a href="http://fr.wikipedia.org/wiki/CSS">css</a> histoire d'avoir un peu de style, et pour que ça reste relativement sobre, pas d'images.</p>
<p>Logiquement j'aurais pu prendre <a href="http://www.sublimetext.com/">un éditeur de texte tout simple</a> et écrire mon <a href="http://fr.wikipedia.org/wiki/CSS">css</a> et mon <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> (la page est vraiment petite).</p>
<p>Mais non, malheureux ! Tout le monde sait bien que l'<a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est surfait aujourd'hui !</p>
<p>Voici donc dans la suite comment créer une petite page web tout simple en utilisant <a href="http://haml.info/">Haml</a>, <a href="http://sass-lang.com/">Sass</a>, <a href="http://ethanschoonover.com/solarized">solarized</a>, <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>, <a href="http://www.ruby-lang.org/fr/">ruby</a>, <a href="http://rake.rubyforge.org/">rake</a> et <a href="http://git-scm.com/">git</a>, le tout en utilisant <a href="http://www.sublimetext.com/">Sublime Text 2</a>.</p>
<p>Ha oui, et histoire que ce soit drôle, vous verrez que j'ai collé pleins de liens partout pour faire genre, spéciale dédicace à... heu non, allez, restons sympa ;-)</p> <h1>Contexte</h1>
<p>Déjà, précisons le contexte :</p>
<ul>
<li>une page web tout simple, comportant en gros un peu de bla bla et une liste d'items</li>
<li>lisible</li>
<li>pas trop moche si possible</li>
<li>très facile à mettre à jour (ce qui arrivera de temps en temps)</li>
</ul>
<p>Ok, une page html avec un peu de css posée sur un serveur fait le boulot. Mais c'était trop simple, allons bon !</p>
<h1>Le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est surfait !</h1>
<p>Déjà, le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> c'est vraiment surfait. Faut réellement être un développeur de la vieille école pour écrire du PHP^W <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> à la main. Franchement, qui voudrait en écrire encore aujourd'hui ?</p>
<p>La solution (enfin l'une) se trouve donc dans <a href="http://haml.info/">haml</a>. <a href="http://haml.info/">haml</a> est un langage de balisage léger pour écrire des templates. C'est plutôt orienté <a href="http://www.ruby-lang.org/fr/">ruby</a> et ça se lit très facilement.</p>
<p>L'indentation est utilisée pour gérer l'enchainement des blocs plutôt que les balises ouvrantes/fermantes (comme en <a href="http://www.python.org/">python</a> ou <a href="http://coffeescript.org/">coffeescript</a> par exemple).</p>
<p>Si on prend l'exemple sur <a href="http://fr.wikipedia.org/wiki/Haml">wikipedia</a> voici ce que ça permet.</p>
<p>Version <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> :</p>
<pre><code><div id="sidebar">
<ul class="main">
<li class="active">
<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/accueil.html">
Accueil
</a>
</li>
<li>
<a href="http://www.winsos.net/~yves/index.php?post/2012/12/03/nouvelles.html">
Nouvelles
</a>
</li>
<li class="disabled">
<a>Membres</a>
</li>
</ul>
</div>
</code></pre>
<p>Version <a href="http://haml.info/">haml</a> :</p>
<pre><code>#sidebar
%ul.main
%li.active
%a{"href" => "accueil.html"}
Accueil
%li
%a{"href" => "nouvelles.html"}
Nouvelles
%li.disabled
%a Membres
</code></pre>
<p>Tout de suite, le gain est énorme ! Plus de syntaxe <a href="http://fr.wikipedia.org/wiki/Xml">xml</a>, plus lisible, indentation forcée, etc.</p>
<h1><a href="http://www.ruby-lang.org/fr/">Ruby</a> et <a href="http://rake.rubyforge.org/">rake</a>, pour faire faussement compliqué</h1>
<p>Le problème de tout ça c'est qu'il faut maintenant transformer ceci en ... <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> ! Ben oui, votre <a href="http://www.google.com/intl/fr/chrome/browser/">navigateur</a> il ne comprend pas le <a href="http://haml.info/">haml</a>.</p>
<p>Heureusement, <a href="http://www.ruby-lang.org/fr/">Ruby</a> vole à notre secours !</p>
<p>Tout d'abord, il est nécessaire d'installer la <a href="http://rubygems.org/">gem</a> <a href="http://haml.info/">haml</a> :</p>
<pre><code>gem install haml
</code></pre>
<p>Vous pouvez donc ensuite compiler votre fichier <a href="http://haml.info/">haml</a> (index.haml) en fichier <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> (index.html) :</p>
<pre><code>require 'haml'
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("index.html", "w") { |f| f.write(html) }
</code></pre>
<p>Si vous appellez ce fichier <code>compile.rb</code> il vous suffit d'exécuter la commande <code>ruby compile.rb</code> pour générer votre fichier <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a>.</p>
<p>Facile, non !</p>
<p>Par contre, arrêtons de voir les choses en petit ! Un tel script n'est pas suffisant, il faut se dépasser un peu quand même !</p>
<p>Ce script va donc être placé dans un fichier <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a>. Voici donc le contenu de ce fichier :</p>
<pre><code>require 'haml'
task :default => :build
desc 'Build site'
task :build do
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
end
</code></pre>
<p>Vous saisissez la différence ? Non ? Ben pourtant elle est évidente, il suffit désormais d'exécuter la commande <code>rake</code> au lieu de <code>ruby compile.rb</code> !</p>
<h1>Et si on coloriait un peu ?</h1>
<p>Maintenant que la partie <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> est réalisée, passons un peu à la mise en style.</p>
<p>Précédemment, on utilisait essentiellement du <a href="http://fr.wikipedia.org/wiki/CSS">css</a>. Tout comme le <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> qui est désormais surfait, le <a href="http://fr.wikipedia.org/wiki/CSS">css</a> est également aujourd'hui une <a href="http://www.php.net">technologie quasi obsolète</a>.</p>
<p>Heureusement pour nous, des petits gars bien malins nous ont concoqueté <a href="http://sass-lang.com/">Sass</a>. Si vous avez compris ce qu'était <a href="http://haml.info/">haml</a> par rapport à <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a>, dites simplement qu'il en est de même à propos de <a href="http://sass-lang.com/">Sass</a> par rapport à <a href="http://fr.wikipedia.org/wiki/CSS">css</a>.</p>
<p><a href="http://sass-lang.com/">Sass</a> est donc un pré-processeur <a href="http://fr.wikipedia.org/wiki/CSS">css</a> vous permettant de l'écrire plus mieux, en <a href="http://www.ruby-lang.org/fr/">enlargeant votre productivité</a>. Il y a plein de possibilités bien sympa, comme les <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins">mixins</a>, les <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules">nested rules</a> et plein d'autres choses.</p>
<p>Lorsque vous écriviez précedemment, en <a href="http://fr.wikipedia.org/wiki/CSS">css</a> :</p>
<pre><code>ul {
color: red;
}
ul li {
margin-left: 1em;
}
ul li.green {
color: green;
}
ul li a {
text-decoration: underline;
}
ul li a:hover {
font-weight: bold;
}
</code></pre>
<p>Vous pouvez désormais écrire en <a href="http://sass-lang.com/">Sass</a> :</p>
<pre><code>ul
color: red
li
margin-left: 1em
&.green
color: green
a
text-decoration: underline
&:hover
font-weight: bold
</code></pre>
<p>Impressionnant, non !</p>
<p>Evidemment, pour pouvoir tout de même générer le <a href="http://fr.wikipedia.org/wiki/CSS">css</a> correspondant (car, pour rappel, ton <a href="http://www.google.com/intl/fr/chrome/browser/">navigateur</a> il ne comprend pas <a href="http://sass-lang.com/">Sass</a>) on va encore utiliser <a href="http://www.ruby-lang.org/fr/">Ruby</a> et la <a href="http://rubygems.org">gem</a> dédiée :</p>
<pre><code>gem install sass
</code></pre>
<p>Voici donc un petit script pour transformer notre <a href="http://sass-lang.com/">Sass</a> (<code>css/style.sass</code>) en <a href="http://fr.wikipedia.org/wiki/CSS">css</a> (<code>style.css</code>) :</p>
<pre><code>require 'sass'
sassengine = Sass::Engine.for_file("css/style.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("style.css", "w") { |f| f.write(css) }
</code></pre>
<p>Mais comme on est des gens bien, on va surtout le rajouter au <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> précédemment créé afin qu'il ressemble à :</p>
<pre><code>require 'sass'
require 'haml'
task :default => :build
desc 'Build site'
task :build do
sassengine = Sass::Engine.for_file("css/style.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("style.css", "w") { |f| f.write(css) }
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
end
</code></pre>
<p>Et voilà ! Un simple appel à <code>rake</code> nous permet donc d'obtenir notre <a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">html</a> et notre <a href="http://fr.wikipedia.org/wiki/CSS">css</a> !</p>
<h1>On devait pas parler de couleurs ?</h1>
<p>Ha si !</p>
<p>Puisqu'on y est, on ne vas pas utiliser la feuille de style standard, say trop pour les loosers !</p>
<p>Tout d'abord, histoire que tous le monde ait la même trogne, on va commencer par utiliser la feuille de <em>reset</em> <a href="http://necolas.github.com/normalize.css/">normalize.css</a>. C'est une bonne alternative à beaucoup de feuilles de <em>reset</em> qu'on trouve habituellement, et elle fait bien son boulot.</p>
<p>Ensuite, ben c'est simple, on va surtout utiliser les couleurs provenant de <a href="http://ethanschoonover.com/solarized">solarized</a>. Il s'agit d'un ensemble de couleurs plutôt bien homogènes, cohérentes entre elles et agréables à l'oeil. Parfait quoi !</p>
<p>Histoire de mettre aussi un peu de fun dans l'histoire, ajoutons quelques icones. Mais comme on fait les choses biens, point d'image ! C'est trop surfait les images aussi ! Donc direction <a href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a>. Il s'agit d'une police de caractère orientée icones. L'avantage est que c'est plutôt léger, vectoriel, coloriable facilement, propre, bien intégré à <a href="http://twitter.github.com/bootstrap/">Twitter bootstrap</a> mais également utilisable sans. C'est propre, c'est net, c'est facile, que demander d'autre ?</p>
<p>Voici d'ailleurs le code <a href="http://sass-lang.com/">Sass</a> que j'ai utilisé pour ajouter mes quelques icones dans ma page :</p>
<pre><code>$fontAwesomePath: "font/fontawesome-webfont" !default
@font-face
font-family: "FontAwesome"
src: url("#{$fontAwesomePath}.eot")
src: url("#{$fontAwesomePath}.eot") format('eot'), url("#{$fontAwesomePath}.woff") format('woff'), url("#{$fontAwesomePath}.ttf") format('truetype'), url("#{$fontAwesomePath}.svg#FontAwesomeRegular") format('svg')
font-weight: normal
font-style: normal
[class^="icon-"]:before,
[class*=" icon-"]:before
font-family: FontAwesome
font-weight: normal
font-style: normal
display: inline-block
text-decoration: inherit
.icon-check-empty:before
content: "\f096"
.icon-check:before
content: "\f046"
.icon-envelope-alt:before
content: "\f0e0"
.icon-phone:before
content: "\f095"
.icon-comments-alt:before
content: "\f0e6"
.icon-comments:before
content: "\f086"
</code></pre>
<h1>On pousse le style un poil plus loin ?</h1>
<p>Histoire d'aller un tout petit peut plus loin, j'ai utilisé deux autres web font pour améliorer un peu la typographie. C'est pas grand chose mais ça fait tout de suite la différence. C'est propre, léger, et agréable visuellement alors pourquoi s'en priver ?</p>
<p>J'ai donc utilisé <a href="http://www.google.com/webfonts/specimen/Numans">Numans</a> comme police de base et <a href="http://www.google.com/webfonts/specimen/Josefin+Sans">Josefin Sans</a> pour les titres. C'est pas grand chose mais le gain est réellement intéressant.</p>
<p>Voici le <a href="http://sass-lang.com/">Sass</a> correspondant :</p>
<pre><code>@import url("//fonts.googleapis.com/css?family=Josefin+Sans:700")
@import url("//fonts.googleapis.com/css?family=Numans")
html, body
font-family: "Numans", arial, helvetica, sans-serif
h1, h2, h3, h4, h5, h6
font-family: "Josefin Sans", arial, helvetica, sans-serif
</code></pre>
<h1>Modification et mise en ligne</h1>
<p>Ha oui, l'objectif initial était également de pouvoir être facilement modifié et mis en ligne.</p>
<p>Pour la publication c'est facile. J'ai simplement mis une règle <code>deploy</code> dans mon <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> qui effectue un <a href="http://rsync.samba.org/">rsync</a> vers mon serveur web. Comme c'est du statique je n'ai rien d'autre à faire, rien a redémarré. La modification est donc instantanément en ligne.</p>
<p>Mon <a href="http://rake.rubyforge.org/files/doc/rakefile_rdoc.html">Rakefile</a> a donc la tête suivante. Il faut tout de même prendre en compte que, pour simplifier les choses, je génère mon contenu dans un répertoire <code>_site</code> qui me permet de le pousser sans me soucier des fichiers sources.</p>
<pre><code>require 'sass'
require 'haml'
task :default => :build
desc 'Build site'
task :build do
sh 'mkdir _site'
sh 'rm -rf _site/*'
sassengine = Sass::Engine.for_file("css/application.sass", :syntax => :sass, :style => :compressed)
css = sassengine.render()
File.open("_site/application.css", "w") { |f| f.write(css) }
haml = IO.read("index.haml")
hamlengine = Haml::Engine.new(haml)
html = hamlengine.render()
File.open("_site/index.html", "w") { |f| f.write(html) }
sh 'cp -R font _site'
end
desc 'Build and deploy'
task :deploy => :build do
sh 'rsync --checksum -rtzh --progress --delete _site/ www:/var/www/plop'
end
</code></pre>
<p>Et voilà ! <code>rake</code> me compile mon projet, je peux aller le voir directement dans <code>_site</code> ou utiliser <a href="https://github.com/jlong/serve">serve</a>. <code>rake deploy</code> quant à lui me génère le contenu et le pousse sur mon serveur web.</p>
<h1>Il ne manquerait pas un truc ?</h1>
<p>Et si, il manque une dernière brique : <a href="http://git-scm.com/">git</a>. En effet, tout le contenu source (donc <code>_site</code> omis) est versionné en utilisant <a href="http://git-scm.com/">git</a>. Je n'utilise pas de serveur type <a href="https://github.com/">github</a> ou autre, j'ai juste créé un dépôt sur mon propre serveur de fichier. Je pousse alors via ssh, c'est très largement suffisant et je n'ai pas besoin de plus de droits, je suis le seul à bosser dessus. L'avantage est qu'un dépôt <a href="http://git-scm.com/">git</a> se monte en un rien de temps et qu'une connexion classique suffit à le récupérer. Je peux alors rappatrier les sources sur une autre machine qui contient <a href="http://www.ruby-lang.org/fr/">Ruby</a> et les <a href="http://rubygems.org">gem</a> nécessaire et je peux alors le modifier, générer et pousser vers mon serveur !</p>
<h1>Et voilà !</h1>
<p>Et voui, et voilà !</p>
<p>Ok, certains diront que c'est utiliser un bulldozer pour écraser une mouche, et ils n'auront probablement pas tord. Quoi qu'il en soit, cela apporte une réelle plus value en terme de confort. Et surtout c'est une base réutilisable de nombreuses fois, extensible (il suffit par exemple de rajouter une entrée pour compiler du coffeescript et ajouter un peu de dynamisme dans les pages, etc).</p>
<h1>Apparté</h1>
<p>'tain mais je sais pas comment il fait, c'est mega super lourd de placer autant de liens dans un post !</p>
<h1>Apparté n°2</h1>
<p>Oui, l'écriture de ce billet est probablement plus longue que l'écriture de la dite page oueb en html+css !</p>
<h1>Bonus</h1>
<p>Vous trouverez les sources de l'exemple sur un dépôt github : <a href="https://github.com/CrEv/web_page_today">web_page_today</a> et <a href="http://www.winsos.net/web_page_today/">l'exemple généré</a>.</p>