2011-04-20 12:29:01 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "jQuery, design, web" >
2011-04-20 13:56:52 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
2012-04-02 21:43:39 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/solarized.css" / >
2011-04-20 13:56:52 +00:00
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2012-05-02 15:43:56 +00:00
< link href = 'http://fonts.googleapis.com/css?family=Inconsolata' rel = 'stylesheet' type = 'text/css' >
2011-04-20 12:29:01 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
2011-04-20 13:56:52 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "<em>Focus</em> > Minimalisme" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Focus > Minimalism" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2012-05-02 15:43:56 +00:00
< script type = "text/javascript" src = "/Scratch/js/highlight/highlight.pack.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/article.js" > < / script >
2011-04-20 12:29:01 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
< title > < em > Focus< / em > > Minimalisme< / title >
< / head >
2011-10-18 22:30:00 +00:00
< body lang = "fr" class = "article" >
2011-04-20 12:29:01 +00:00
< script type = "text/javascript" > / / < ! [ C D A T A [
2011-04-20 13:56:52 +00:00
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
2011-04-20 12:29:01 +00:00
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" onclick = "setLanguage('en')" > in English< / a >
2011-04-20 12:29:01 +00:00
< / div >
2011-09-28 16:05:55 +00:00
< div class = "flush" > < / div >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "titre" >
< h1 >
< em > Focus< / em > > Minimalisme
< / h1 >
< h2 >
Cacher la navigation pour une meilleure concentration
< / h2 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
2012-05-03 09:21:34 +00:00
< p > Je crois que le but du minimalisme est de facilité le < em > < strong > Focus< / strong > < / em > c’ est-à-dire la concentration sur le contenu. Je crois que le minimalisme doit être un moyen et pas une fin. Le < em > Focus< / em > devrait être le but, et je pense que le minimalisme n’ est pas obligatoire pour l’ atteindre.< / p >
2011-04-20 12:29:01 +00:00
2012-05-03 09:21:34 +00:00
< p > C’ est pourquoi mon design n’ est pas minimaliste. Mais j’ ai décidé d’ enlever la majorité des objets servant à la navigation pour améliorer l’ attention sur l’ article. Peut-être que plus tard, je préfèrerai laisser le menu dans les pages normales du site pour ne le cacher que dans les articles de blog.
Pour l’ instant je le cache partout.< / p >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "corps" >
< h2 class = "first" id = "dtails-techniques" > Détails techniques< / h2 >
< p > Pour ceux qui souhaitent connaître les détails techniques derrière le menu apparaissant/disparaissant, voici le code utilisant jQuery.< / p >
2012-05-03 09:21:34 +00:00
< p > L’ HTML : < / p >
2011-04-20 12:29:01 +00:00
< div >
2012-05-02 15:43:56 +00:00
< pre > < code class = "html" > < div id="menuButton"> < /div>
< div id="entete"> #content of the menu< /div>
< / code > < / pre >
2011-04-20 12:29:01 +00:00
< / div >
< p > La CSS : < / p >
2012-05-02 15:43:56 +00:00
< div >
< pre > < code class = "css" > #menuButton {
font-size: 2em;
height: 2em;
line-height: 1.8em;
width: 2em;
position: fixed;
left: 0;
top: 0;
z-index: 9001 }
#menuButton:hover {
cursor: pointer; }
#entete {
top: 5em;
left: 0;
position: fixed;
width: 10em;
z-index: 9000; }
< / code > < / pre >
2011-04-20 12:29:01 +00:00
< / div >
< p > Le code javascript (utilisant jQuery)< / p >
< div >
2012-05-02 15:43:56 +00:00
< pre > < code class = "javascript" > function hideMenu() {
$('#entete').animate({left:"-10em"}, 500 );
$('#menuButton').html('→ ');
2011-04-20 12:29:01 +00:00
}
2012-05-02 15:43:56 +00:00
function showMenu() {
$('#entete').animate({left:"0em"}, 500 );
$('#menuButton').html('← ');
2011-04-20 12:29:01 +00:00
}
2012-05-02 15:43:56 +00:00
function toggleMenu() {
if ( $('#entete').css('left')=='-10em' ) {
2011-04-20 12:29:01 +00:00
showMenu();
2012-05-02 15:43:56 +00:00
} else {
2011-04-20 12:29:01 +00:00
hideMenu();
}
}
2012-05-02 15:43:56 +00:00
< / code > < / pre >
2011-04-20 12:29:01 +00:00
< / div >
< p > Le résultat est visible dans le coin en haut à droite de cet article.< / p >
< / div >
2012-04-10 13:56:34 +00:00
< div id = "social" >
< div class = "left" > < a href = "https://twitter.com/share" class = "twitter-share-button" data-via = "yogsototh" > Tweet< / a >
< script > ! function ( d , s , id ) { var js , fjs = d . getElementsByTagName ( s ) [ 0 ] ; if ( ! d . getElementById ( id ) ) { js = d . createElement ( s ) ; js . id = id ; js . src = "//platform.twitter.com/widgets.js" ; fjs . parentNode . insertBefore ( js , fjs ) ; } } ( document , "script" , "twitter-wjs" ) ; < / script >
< / div >
< div class = "left" > < div class = "g-plusone" data-size = "medium" data-annotation = "inline" data-width = "106" > < / div >
< script type = "text/javascript" >
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
< / script >
< / div >
< div class = "flush" > < / div >
< / div >
2011-04-20 12:29:01 +00:00
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
2012-04-10 13:56:34 +00:00
document.write('< div id = "clickcomment" > Commentaires & Partage< / div > ');
2011-04-20 12:29:01 +00:00
< / script >
< div class = "flush" > < / div >
2012-04-10 13:56:34 +00:00
2011-04-20 12:29:01 +00:00
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2011-04-20 13:56:52 +00:00
var idcomments_post_id = '/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/';
2011-04-20 12:29:01 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
2011-04-20 13:56:52 +00:00
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-04-20 13:56:52 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Bienvenue< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-untaught-git-usage/" > < span class = "nicer" > «< / span > Usages non dits de Git< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/" > < span class = "nicer" > «< / span > Charger une page web avec style< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-09-Disqus-versus-Intense-Debate--Why-I-switched-/" > < span class = "nicer" > «< / span > Disqus contre Intense Debate (pourquois j'ai changé)< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-launch-daemon-from-command-line/" > lancer un démon en ligne de commande < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" > Un menu qui attends avant de se cacher < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/" > Synchronisation avec mobileme (2) < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
2012-04-02 21:43:39 +00:00
< div >
2012-04-10 13:56:34 +00:00
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
2012-04-02 21:43:39 +00:00
< / div >
2011-04-20 12:29:01 +00:00
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Écrit le : 22/10/2009
modifié le : 17/06/2010
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
