2010-08-23 12:26:48 +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" >
< 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" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
< 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 >
< title > < em > Focus< / em > > Minimalisme< / title >
< / head >
< body lang = "fr" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" onclick = "setLanguage('en')" > in English< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< 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" >
< 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 >
< 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 >
< / 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 >
< p > L’ HTML : < / p >
< div >
< pre class = "twilight" >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > menuButton< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < span class = "MetaTagAll" > < < / span > /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< span class = "MetaTagAll" > < span class = "MetaTagAll" > < < / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > < span class = "MetaTagAll" > id< / span > < span class = "MetaTagAll" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > entete< / span > < span class = "String" > " < / span > < / span > < / span > < span class = "MetaTagAll" > > < / span > < / span > #content of the menu< span class = "MetaTagAll" > < span class = "MetaTagAll" > < /< / span > < span class = "MetaTagAll" > div< / span > < span class = "MetaTagAll" > > < / span > < / span >
< / pre >
< / div >
< p > La CSS : < / p >
< div > < pre class = "twilight" >
< span class = "CssId" > < span class = "CssId" > #< / span > menuButton< / span > {
< span class = "CssPropertyName" > font-size< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > height< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > line-height< / span > : < span class = "CssAdditionalConstants" > 1.8< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 2< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > z-index< / span > : < span class = "CssAdditionalConstants" > 9001< / span > }
< span class = "CssId" > < span class = "CssId" > #< / span > menuButton< / span > < span class = "MetaTagInline" > < span class = "MetaTagInline" > :< / span > hover< / span > {
< span class = "CssPropertyName" > cursor< / span > : < span class = "CssPropertyValue" > pointer< / span > ; }
< span class = "CssId" > < span class = "CssId" > #< / span > entete< / span > {
< span class = "CssPropertyName" > top< / span > : < span class = "CssAdditionalConstants" > 5< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > left< / span > : < span class = "CssAdditionalConstants" > 0< / span > ;
< span class = "CssPropertyName" > position< / span > : < span class = "CssPropertyValue" > fixed< / span > ;
< span class = "CssPropertyName" > width< / span > : < span class = "CssAdditionalConstants" > 10< / span > < span class = "Keyword" > em< / span > ;
< span class = "CssPropertyName" > z-index< / span > : < span class = "CssAdditionalConstants" > 9000< / span > ; }
< / pre >
< / div >
< p > Le code javascript (utilisant jQuery)< / p >
< div >
< pre class = "twilight" >
< span class = "Storage" > function< / span > < span class = "Entity" > hideMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > -10em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #menuButton< span class = "String" > '< / span > < / span > ).html(< span class = "String" > < span class = "String" > '< / span > & rarr;< span class = "String" > '< / span > < / span > );
}
< span class = "Storage" > function< / span > < span class = "Entity" > showMenu< / span > () {
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).animate({left:< span class = "String" > < span class = "String" > " < / span > 0em< span class = "String" > " < / span > < / span > }, < span class = "Constant" > 500< / span > );
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #menuButton< span class = "String" > '< / span > < / span > ).html(< span class = "String" > < span class = "String" > '< / span > & larr;< span class = "String" > '< / span > < / span > );
}
< span class = "Storage" > function< / span > < span class = "Entity" > toggleMenu< / span > () {
< span class = "Keyword" > if< / span > ( < span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > #entete< span class = "String" > '< / span > < / span > ).css(< span class = "String" > < span class = "String" > '< / span > left< span class = "String" > '< / span > < / span > )< span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > -10em< span class = "String" > '< / span > < / span > ) {
showMenu();
} < span class = "Keyword" > else< / span > {
hideMenu();
}
}
< / pre >
< / div >
< p > Le résultat est visible dans le coin en haut à droite de cet article.< / p >
< / div >
< 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();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
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/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2010-09-17 15:15:29 +00:00
< ul > < li > < a href = "/Scratch/fr/" > Accueil< / a > < / li >
2010-08-23 12:26:48 +00:00
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/fr/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li > < / ul >
2010-08-23 12:26:48 +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" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/fr/blog/2009-10-untaught-git-usage/" > < span class = "nicer" > «< / span > Usages non dits de Git< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +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 >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< 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" >
2010-08-31 13:06:43 +00:00
Écrit le : 22/10/2009
2010-09-02 09:51:46 +00:00
modifié le : 17/06/2010
2010-08-23 12:26:48 +00:00
< / 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 >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >