D-Blog-Pas - Mot-clé - CSSLogiciels libres et photos et ce depuis 2005!2014-01-23T09:29:58+01:00Lucurn:md5:2e3b315bec6b2be55a59bba71dd9c0b8DotclearBac à sable : Test Blueprinturn:md5:2ee205b0b77d41e41f8755e48b3515412010-04-12T21:54:00+01:002010-04-12T21:54:00+01:00LucZen bac à sablebac à sableCSSInternet <p>Après un an sans y toucher, me voilà de retour dans mon bac à sable. Il faut croire que le retour prochain des beaux jours est propice à bidouiller les CSS.<br />
La raison de ce retour est dû à la découverte des framework CSS.<br />
Les frameworks CSS sont un ensemble de feuilles de style qui permettent de concevoir rapidement une mise en page web et surtout compatible avec la majeur partie des navigateurs, en particulier Internet Explorer.</p>
<p>Voilà donc ma deuxième page d'essai de CSS : <a href="http://dblogpas.free.fr/dotclear/bac_a_sable/blueprint01/blueprintest.html" hreflang="fr">Bidouillé par Blueprint</a>.</p>
<p><img src="http://dblogpas.free.fr/dotclear/images/bac_a_sable/blueprint/blueprint_test_01.png" alt="blueprint_test_01.png" style="float:left; margin: 0 1em 1em 0;" title="blueprint_test_01.png, mar. 2010" />
Il existe pas mal de framework CSS, le premier que je viens de tester est <a href="http://www.blueprintcss.org/" hreflang="en">Blueprint</a>.<br />
Comme c'est indiqué dans l'en-tête de la page, c'est un premier essai, très simple par rapport aux possibilités proposées par Blueprint.<br />
La page est simplement composée d'un en-tête, de deux colonnes et d'un pied de page. Juste pour découvrir l'outil.</p>
<h4>L'affichage dans quelques navigateurs:</h4>
<p><strong>Sous Ubuntu et Firefox 3.5.8</strong> tout se passe bien, normal c'est le navigateur que j'ai utiliser pour mettre en place les CSS.<br />
<strong>Sous Ubuntu et Chronium 5</strong> tout est à sa place et le texte passe bien mieux qu'avec Firefox!<br />
<strong>Sous Kubuntu et Konkeror 4.3.2</strong>, le texte prend moins de place, c'est très visible avec l'image de fond dans l'introduction et puis le tableau et l'image voisine se chevauchent.<br />
<strong>Sous Win Xp et Firefox 3.6</strong> le texte est beaucoup moins beau, moins "gras".<br />
<strong>Sous Win XP et IE 8</strong> c'est presque parfait, sauf mon background qui n'est plus là!?<br /></p>
<h5>En conclusion de ces tests de navigateurs:<br /></h5>
<p>rien de ce qui est mis en place à l'aide de Blueprint n'est "<em>déformé</em>" ou "<em>absent</em>" à l'écran!<br />
Même sous IE, Blueprint est donc un outil efficace!</p>
<h4>Pour conclure ce test:</h4>
<p>Oui, oui et encore oui, l'utilisation d'un framework CSS n'était pas forcement utile pour monter cette page. Mais il faut bien commencer par quelque chose.<br />
Que dire de Blueprint? On ne se prend plus la tête à mettre en page un site mais à trouver la balise blueprint à mettre au bon endroit.<br />
Une fois ce stade passé, c'est vrai que c'est rapide de monter une page simple.</p>
<p>Si j'ai le courage <img src="/dotclear/themes/default/smilies/wink.png" alt=";-)" class="smiley" /> de poursuivre des essais de Blueprint ou d'un autre farmework CSS je pense que je vais changer le contenu de cette page (plus de texte, d'autres images). Une entorse à une règle du jeu de mon bac à sable qui voulait que le code de la page ne change pas!</p>
<p>Des liens à suivre pour en savoir plus sur Blueprint :<br />
- eclaireur.net : <a href="http://www.eclaireur.net/technique/les-framework-css-pour-developper-des-sites-plus-rapidement/" hreflang="fr">Les framework CSS pour développer des sites plus rapidement</a>.<br />
- CSS 4 design : <a href="http://css4design.com/?s=framework+css" hreflang="fr">quelques liens sur les Framework CSS</a>, pensez, si vous ne connaissez pas ce site, à lire les autres billets. C'est une mine d'infos<sup>[<a href="http://dblogpas.free.fr/index.php?post/2010/02/27/Bac-%C3%A0-sable-%3A-Test-Blueprint#pnote-511-1" id="rev-pnote-511-1">1</a>]</sup>!<br />
- <a href="http://www.blueprintcss.org/" hreflang="en">Blueprint</a> : le site de Blueprint!<br />
- <a href="http://bgg.kematzy.com/" hreflang="en">Blueprint Grid CSS Generator</a> : Un générateur de CSS pour Blueprint si vous souhaitez modifier les réglages de base.</p>
<p>À l'année prochaine pour une autre expérience! <img src="/dotclear/themes/default/smilies/wink.png" alt=";-)" class="smiley" /></p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="http://dblogpas.free.fr/index.php?post/2010/02/27/Bac-%C3%A0-sable-%3A-Test-Blueprint#rev-pnote-511-1" id="pnote-511-1">1</a>] Billet non sponsorisé! <img src="/dotclear/themes/default/smilies/wink.png" alt=";-)" class="smiley" /> </p></div>
Bac à sable : horizontalurn:md5:80c9a8d1e17e4f233733395f2e95838e2009-03-25T22:52:00+00:002010-02-27T21:44:24+00:00LucZen bac à sablebac à sableCSSD-Blog-PasInternet <p>Voilà, la première page et son thème : <a href="http://dblogpas.free.fr/dotclear/bac_a_sable/horizontal/horizontal.html" hreflang="fr">horizontal</a>.</p>
<p><img src="http://dblogpas.free.fr/dotclear/images/bac_a_sable/horizontal/horizontal.png" alt="horizontal.png" style="display:block; margin:0 auto;" title="horizontal.png, mar. 2009" /></p>
<p>Ce premier thème est à la naissance de cette idée de <a href="http://dblogpas.free.fr/index.php?pages/Zen-bac-%C3%A0-sable" hreflang="fr">bac à sable</a>!<br />
Ce thème, n'a rien graphiquement de spectaculaire. Par contre, comme vous pouvez le voir, celui-ci est orienté horizontalement. Je voulais savoir comment ça fait de naviguer horizontalement et plus verticalement.<br />
Il faut bien avouer que ce n'est pas commun sur Internet de trouver ce genre de mise en page.<br />
Ce changement d'orientation va surement vous étonner, vous n'aurez peut-être pas l'habitude de "<em>scroller</em>" horizontalement et non verticalement!<br /></p>
<p>Bien sur, je ne pense pas que ce thème soit facilement adaptable à un blogue ou un site au contenu "<em>dynamique</em>". Mais pour un site "<em>statique</em>", ce thème sort du lot des nombreuses pages indexées sur Internet!<br />
<strong>À vous de juger!</strong></p>
<h4>Caractéristiques techniques :</h4>
<p>- J'utilise pour ce thème la propriété de feuille de style css "<em>-moz-border-radius</em>". Elle permet d'arrondir les coins d'une bordure sans utiliser d'images de fond! Un exemple : le sommaire.<br />
Évidement, cette propriété n'est pas reconnue par tous les navigateurs!<br />
- J'utilise pour les liens du sommaire, les ancres (liens internes) mais ici, leur utilisation n'est pas très efficace!<br />
- J'ai utilisé l'éditeur <a href="http://www.framasoft.net/article2269.html" hreflang="fr">Bluefish</a> pour tester ce logiciel.</p>
<h4>Test de la page dans divers navigateurs :</h4>
<p><strong>Firefox 3.0.7</strong> (sous Linux) : pas de problème<br />
<strong>Firefox 3.0.5</strong> (sous Vista) : pas de problème<br />
<strong>Firefox 3.1b3</strong> (sous Linux) : le texte du pied de page est légèrement décalé vers le bas mais pas l'image de fond!<br />
<strong>Chrome 2.0</strong> (sous Vista) : ne reconnait pas la propriété de feuille de style css "<em>-moz-border-radius</em>",le texte du pied de page est légèrement décalé vers le bas mais pas l'image de fond!<br />
<strong>Opera 9.6</strong> (sous Linux) : ne reconnait pas la propriété de feuille de style css "<em>-moz-border-radius</em>", le texte du pied de page est légèrement décalé vers le bas mais pas l'image de fond!<br />
<strong>IE6</strong> (sous XP) : je n'en parle même pas!<br />
<strong>IE7</strong> (sous Vista) : ne reconnait pas la propriété de feuille de style css "<em>-moz-border-radius</em>" et m'envoie mon pauvre pied de page au fin fond de la page!<br />
<strong>IE8</strong> (sous Vista) : même résultat qu'avec IE7!<br /></p>