Mon envie était de créer un design sobre et simple avec une petite touche  qui se rapprocherait de la mise en page d’un livre.

J’ai utilisé quelques éléments CSS3 pour ce site et il est préférable de le regarder avec un navigateur récent.

http://tsuneko.taniuchi.fr

Why use free software, write free software but conform to non free web design?

Consider a font style like this one:

font-family: "Helvetica", sans-serif;

On a freshly installed GNU/Linux system this will use the fallback « sans-serif » default font, which is most likely Bitstream Vera Sans. Although Bitstream Vera Sans is a very beautiful font, it is really much bigger and wider than Helvetica or Arial. Some designs may not fit anymore or lose their particular character, when viewed on systems without the « right » font.

The preinstalled fonts that come with both, the Windows and the Mac operating system, are : Arial, Arial Black, Comic Sans, Courier New,Georgia, Impact, Times New Roman, Trebuchet MS and Verdana, as you can see in the « safe list » on the indispensable typetester.org website. However, none of those fonts is preinstalled on a free operating system.

Included in free operating systems, you will most likely find the following typefaces, released under a free licence:

• Bitstream Vera
• DejaVu based on Bitstream Vera
• Liberation metrically compatible with Arial, Times New Roman and Courier New
• Nimbus Sans L based on Helvetica
• Nimbus Roman No9 L based on Times
• Nimbus Mono L based on Courier
• GNU Free Fonts based on Nimbus

I have created a comparison chart – which ou may visualize here in screenshots [sans-serif | serif | monospace] or download  [HTML | PNG]. It basically boils down to the following replacement suggestions:

* different line-height, that should probably be adjusted.

In conlusion, the example CSS of the beginning could become :

font-family: "Helvetica", "Nimbus Sans L", "FreeSans", sans-serif;

So, if the client has Helvetica installed, we use Helvetica, otherwise, we try Nimbus, then FreeSans.

Another example: A stylesheet like this:

font-family: "Verdana", "Arial", sans-serif;

could become:

font-family: "Verdana", "Bitstream Vera Sans", "Arial", "Liberation Sans", sans-serif;

You could also write this the other way round, if you prefer the GPL fonts on free operating systems…

Pour le couple d’architectes Vizet, j’ai créé un thème WordPress sur mesure, d’après le concept et le design de Mathias Delfau. Le thème implémente diverses galeries d’images. Un espace restreint permet aux clients et aux collaborateurs de télécharger des documents les concernant.

Für das Architektenpaar Vizet habe ich ein maßgeschneidertes WordPressthema erstellt, nach einem Design und Konzept von Mathias Delfau. Das Thema enthält diverse Bildergalerien. Kunden und freie Mitarbeiter können Dokumente in einer zugangsbeschränkten Zone herunterladen.

I have created a very special WordPress theme for the website of the architect couple Vizet, follwing the concept and graphics invented by Mathias Delfau. The theme contains various image galleries. Clients and associates may download documents via a restricted area.

http://vizet-architectes.fr

CC-BY-NC-ND
Dieses Werk bzw. Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
Cette oeuvre/contenu est publié sous Licence Creative Commons.
This artwork/contenu is published under a Creative Commons licence.

var $j = jQuery.noConflict();
$j(function(){
    jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10});
});

However, the client also wanted the horizontal scrollbars customized…

It took me several hours to stumble upon the modification of Luck’s plugin by Threeformed, a canadian media company.
But I ran into problems integrating their plugin with WordPress’ noConflict function and had to modify all the calls to « $ », into « jQuery ». It then worked out, but I needed to be able to design it via CSS independently of the vertical scrollbars. In order to do that I added a second CSS selector, through which I was then able to design the horizontal scrollbars using other background images than for the vertical ones.
One strange thing however is that this plugin expects the element you want to add scrollbars to to be set to « float:left », otherwise it has problems calculating the initial width of the horizontal scrollbars.

You may download my modified jQuery plugins here.

I am calling the plugin the following way :

var $j = jQuery.noConflict();
var originalSizes = new Array();
$j(function(){
    jQuery('.scroll-horizontal-pane').jScrollHorizontalPane({scrollbarHeight:10});
});

The corresponding CSS could look something like this :

.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    outline: none;
}
.jScrollPaneTrack {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    width: 10px;
    background: url(track-vertical.jpg) repeat-y;
}
.jScrollHPaneContainer .jScrollPaneTrack {
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    width: 100%;
    height: 10px;
}
.jScrollPaneDrag {
    position: absolute;
    background: url(cap-vertical.jpg) repeat-y;
    cursor: pointer;
    overflow: hidden;
}
.jScrollHPaneContainer .jScrollPaneTrack {
    background: url(track-horizontal.jpg) repeat-x;
}
.jScrollHPaneContainer .jScrollPaneDrag {
    background: url(cap-horizontal.jpg) repeat-x;
}

In order to do this I added the following lines of code to the showNavigation if-loop :

if ( $showNavigation == 1 ) {
  // code..
} else {
  // autoplay
  jQuery(window).load( function() {
  timerID_$galleryID = setInterval( \"jQuery.galleria.next( 'stage_$galleryID', '$galleryID' );\", $intervalMilliSec );
 });
}

So, if one unselects « show navigation » in wp-galleria’s admin panel in WordPress, the slideshow will autoplay.

Pour Christophe Prat j’ai mis en place un site concis et statique, comportant des textes ainsi qu’une galerie, qui a été développée en Javascript, présentant ses peintures . Graphisme et comportements ont été conçus par Mathias Delfau.

http://christopheprat.com