yogsototh/scratch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
scratch/output/Scratch/fr/blog/2009-10-Focus-vs-Minimalism/index.html
Yann Esposito (Yogsototh) f19c2a270a Regen
2012-01-20 14:41:44 +01:00

250 lines
No EOL
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?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> &gt; 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 &gt; 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>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<title><em>Focus</em> &gt; Minimalisme</title>
</head>
<body lang="fr" class="article">
<script type="text/javascript">// <![CDATA[
document.write('<div id="blackpage"><img src="/Scratch/img/loading.gif" alt="Chargement en cours..."/></div>');
// ]]>
</script>
<div id="content">
<div id="choix">
<div class="return"><a href="#entete">&darr; Menu &darr;</a></div>
<div id="choixlang">
<a href="/Scratch/en/blog/2009-10-Focus-vs-Minimalism/" onclick="setLanguage('en')">in English</a>
</div>
<div class="flush"></div>
</div>
<div id="titre">
<h1>
<em>Focus</em> &gt; 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&nbsp;: </p>
<div>
<pre class="twilight">
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">div</span> <span class="MetaTagAll"><span class="MetaTagAll">id</span><span class="MetaTagAll">=</span><span class="String"><span class="String">&quot;</span><span class="String">menuButton</span><span class="String">&quot;</span></span></span><span class="MetaTagAll">&gt;<span class="MetaTagAll">&lt;</span>/</span><span class="MetaTagAll">div</span><span class="MetaTagAll">&gt;</span></span>
<span class="MetaTagAll"><span class="MetaTagAll">&lt;</span><span class="MetaTagAll">div</span> <span class="MetaTagAll"><span class="MetaTagAll">id</span><span class="MetaTagAll">=</span><span class="String"><span class="String">&quot;</span><span class="String">entete</span><span class="String">&quot;</span></span></span><span class="MetaTagAll">&gt;</span></span>#content of the menu<span class="MetaTagAll"><span class="MetaTagAll">&lt;/</span><span class="MetaTagAll">div</span><span class="MetaTagAll">&gt;</span></span>
</pre>
</div>
<p>La CSS&nbsp;: </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">&quot;</span>-10em<span class="String">&quot;</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>&amp;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">&quot;</span>0em<span class="String">&quot;</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>&amp;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>
Vous devez activer javascript pour commenter.
</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">
<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>
</div>
<div class="flush"></div>
<hr/>
<div id="next_before_articles">
<div id="previous_articles">
articles précédents
<div class="previous_article">
<a href="/Scratch/fr/blog/2009-10-untaught-git-usage/"><span class="nicer">«</span>&nbsp;Usages non dits de Git</a>
</div>
<div class="previous_article">
<a href="/Scratch/fr/blog/2009-10-How-to-preload-your-site-with-style/"><span class="nicer">«</span>&nbsp;Charger une page web avec style</a>
</div>
<div class="previous_article">
<a href="/Scratch/fr/blog/2009-09-Disqus-versus-Intense-Debate--Why-I-switched-/"><span class="nicer">«</span>&nbsp;Disqus contre Intense Debate (pourquois j'ai changé)</a>
</div>
</div>
<div id="next_articles">
articles suivants
<div class="next_article">
<a href="/Scratch/fr/blog/2009-10-launch-daemon-from-command-line/">lancer un démon en ligne de commande&nbsp;<span class="nicer">»</span></a>
</div>
<div class="next_article">
<a href="/Scratch/fr/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/">Un menu qui attends avant de se cacher&nbsp;<span class="nicer">»</span></a>
</div>
<div class="next_article">
<a href="/Scratch/fr/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/">Synchronisation avec mobileme (2)&nbsp;<span class="nicer">»</span></a>
</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">
É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>
<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>
Reference in a new issue View git blame Copy permalink