{"id":1668,"date":"2012-05-20T23:29:27","date_gmt":"2012-05-20T22:29:27","guid":{"rendered":"http:\/\/www.ralentirtravaux.com\/le_blog\/?p=1668"},"modified":"2013-04-13T13:04:38","modified_gmt":"2013-04-13T12:04:38","slug":"ravalement-de-facade-pour-ralentir-travaux","status":"publish","type":"post","link":"https:\/\/www.ralentirtravaux.com\/le_blog\/ravalement-de-facade-pour-ralentir-travaux\/","title":{"rendered":"Ravalement de fa\u00e7ade pour Ralentir travaux"},"content":{"rendered":"
\n\"Logo\"<\/a>C\u2019est fait ! Bien s\u00fbr, ce n\u2019est pas extraordinaire, ce n\u2019est peut-\u00eatre pas d\u2019une grande originalit\u00e9, mais c\u2019est fait : Ralentir travaux<\/a> a subi un (l\u00e9ger) lifting. Le site gagne m\u00eame un logo dont je vous laisse deviner la signification. Il s\u2019agr\u00e9mente de quelques couleurs (oui, il y a du bleu). Les changements ne sont toutefois pas que d\u2019ordre cosm\u00e9tique, le code a \u00e9t\u00e9 revu, quelques nouveaut\u00e9s font leur apparition. Et cette r\u00e9fection m\u2019a donn\u00e9 plein d\u2019id\u00e9es \u00e0 exploiter dans un avenir proche.<\/p>\n

HTML 5 et CSS 3<\/strong><\/p>\n

Tout d\u2019abord Ralentir travaux est d\u00e9sormais en HTML 5. Pour cela, je n\u2019ai pas d\u00fb changer grand-chose. Un doctype. Quelques balises nouvelles (header, section, footer, etc.). Un peu de CSS3. Rien de tr\u00e8s complexe. Des effets d\u2019ombre, des coins arrondis, des d\u00e9grad\u00e9s, quelques colonnes, etc. De ce point de vue, je ne suis pas all\u00e9 aussi loin que je le d\u00e9sirais. Il faudra attendre la prochaine r\u00e9vision, quand j\u2019aurais acquis des connaissances plus approfondies. Cependant, je recherche avant tout la simplicit\u00e9. Celle que l\u2019on trouve, par exemple, dans une application comme Instapaper pour iPad<\/a> dont le succ\u00e8s me conforte dans mes choix esth\u00e9tiques : un d\u00e9pouillement qui ne laisse que l\u2019essentiel, le texte. J\u2019aurais quand m\u00eame voulu proc\u00e9der \u00e0 quelques raffinements, quelque chose qui se rapproche de la mise en page d\u2019un journal papier avec des colonnes, mais l\u00e0 encore ce sera pour la prochaine fois.
\nDe toute fa\u00e7on, me replonger dans les techniques du web m\u2019a remis le pied \u00e0 l\u2019\u00e9trier, m\u2019a donn\u00e9 l\u2019envie, et peut-\u00eatre, dans quelque temps, la possibilit\u00e9 de faire mieux encore, quand j\u2019en aurais appris davantage. \u00c0 ce propos, j\u2019ai quand m\u00eame pu corriger quelques erreurs dans le code, des grossi\u00e8ret\u00e9s de d\u00e9butant, et je suis bien aise de m\u2019en \u00eatre d\u00e9barrass\u00e9. Peut-\u00eatre y en a-t-il d\u2019autres… Et que de pages \u00e0 corriger ! Ralentir travaux demandera un jour un travail \u00e0 plein temps !
\nComme mes capacit\u00e9s en JavaScript sont toujours aussi limit\u00e9es, j\u2019ai eu recours \u00e0 Hype<\/a> qui m\u2019a bien aid\u00e9 pour r\u00e9aliser un \u00abSlide\u00bb afin de pr\u00e9senter les grandes parties du site. Cela s\u2019appelle Visite guid\u00e9e<\/a>.<\/p>\n

\"Visite<\/a><\/p>\n

J\u2019oubliais ! En bas, de la page d\u2019accueil, il y a une petite subtilit\u00e9 esth\u00e9tique qui fait d\u00e9filer le texte. Si l\u2019id\u00e9e et sa r\u00e9alisation ne sont pas de moi, c\u2019est quand m\u00eame bien joli.<\/p>\n

\"Visite<\/a><\/p>\n

Quelques ajouts<\/strong><\/p>\n

Avant de proc\u00e9der \u00e0 quelques ajouts, j\u2019ai supprim\u00e9 la partie Voir, qui n\u2019\u00e9tait plus mise \u00e0 jour depuis longtemps. La menu n\u2019affiche donc plus que quatre parties : l\u2019actualit\u00e9<\/a>, les lettres<\/a>, le blog (vous y \u00eates) et les liens<\/a>. C\u2019est \u00e9videmment dans la deuxi\u00e8me que se concentre l\u2019essentiel du site accessible \u00e0 partir de cette page.
\nJ\u2019ai essay\u00e9 d\u2019am\u00e9liorer le r\u00e9f\u00e9rencement interne en ajoutant \u00e0 chaque page (en fait, pas tout \u00e0 fait, j\u2019y travaille encore) une s\u00e9lection de liens susceptibles d\u2019int\u00e9resser le visiteur.<\/p>\n

\"\"<\/a><\/p>\n

Mais la plus grande nouveaut\u00e9 est la possibilit\u00e9 de commenter chaque page. Dans un premier temps, je ne voulais ajouter cela que dans la partie Cours<\/a>, mais emport\u00e9 dans mon \u00e9lan, je l\u2019ai ajout\u00e9 sur chacune des pages. Un bon millier (\u00e0 la louche). Le but est de permettre la discussion, de demander une pr\u00e9cision, de corriger une erreur, etc. L\u00e0 encore, dans un avenir plus ou moins proche, j\u2019aimerais permettre davantage d\u2019interaction comme la possibilit\u00e9 de modifier, de personnaliser les pages.<\/p>\n

Pour finir<\/strong><\/p>\n

Pour finir, je voudrais rendre \u00e0 C\u00e9sar ce qui est \u00e0 C\u00e9sar et remercier les auteurs de sites qui m\u2019ont aid\u00e9, d’une fa\u00e7on ou d’une autre, dans la r\u00e9alisation du mien.
\nJ\u2019ai toujours \u00e9t\u00e9 inspir\u00e9 par les designs minimalistes comme celui d\u2019Apple<\/a>. J\u2019ai bien aim\u00e9 \u00e9galement ce site tr\u00e8s \u00e9pur\u00e9<\/a>. Pixeden<\/a> m\u2019a fourni de jolies images. Les g\u00e9n\u00e9rateurs en tout genre m\u2019ont apport\u00e9 une aide pr\u00e9cieuse : Ultimate CSS Gradient Generator<\/a>, Support du web<\/a> pour les coins arrondis, CSS3 generator<\/a>, G\u00e9n\u00e9rateur de multi-colonnes en CSS3<\/a>, CSS menumaker<\/a>, un autre CSS3 Generator<\/a>, CSSDeck<\/a>, CCS 3.0 Maker<\/a>, etc.<\/p>\n

Et ensuite ?<\/strong><\/p>\n

Beaucoup de choses me font envie. Il m\u2019a toujours sembl\u00e9 que je devais vraiment me mettre au JavaScript, mais aujourd\u2019hui la priorit\u00e9 me semble devoir \u00eatre accord\u00e9e \u00e0 l\u2019apprentissage du CSS et de ses propri\u00e9t\u00e9s vraiment surprenantes. Parmi celles-ci, j\u2019aimerais int\u00e9grer de pareilles transitions<\/a> pour passer d\u2019une page \u00e0 l\u2019autre. J\u2019avais \u00e9t\u00e9 tr\u00e8s impressionn\u00e9 par Paperfold CSS<\/a>. Il y aussi des animations rigolotes : Ring Menu<\/a>, Dynamic Stack of Index Cards<\/a>, CSS3 Rotating menu<\/a> qui marche tr\u00e8s mal avec Safari, CSS3 ordered list style<\/a> qui ne marche qu\u2019avec Firefox, etc.<\/p>\n

Bref, pas mal de travail en perspective.\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"

C\u2019est fait ! Bien s\u00fbr, ce n\u2019est pas extraordinaire, ce n\u2019est peut-\u00eatre pas d\u2019une grande originalit\u00e9, mais c\u2019est fait : Ralentir travaux a subi un (l\u00e9ger) lifting. Le site gagne m\u00eame un logo dont je vous laisse deviner la signification. Il s\u2019agr\u00e9mente de quelques couleurs (oui, il y a du bleu). Les changements ne sont […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12],"tags":[],"class_list":["post-1668","post","type-post","status-publish","format-standard","hentry","category-divers","category-informatique"],"_links":{"self":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/comments?post=1668"}],"version-history":[{"count":17,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1668\/revisions"}],"predecessor-version":[{"id":2253,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/posts\/1668\/revisions\/2253"}],"wp:attachment":[{"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/media?parent=1668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/categories?post=1668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ralentirtravaux.com\/le_blog\/wp-json\/wp\/v2\/tags?post=1668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}