TwinXeon by Renaudet

A propos du design de TwinXeon

Preambule...

S'il y a bien un domaine où je suis nul, c'est bien le design de site Web. A chacun son métier, pas vrais ?

Je fais donc de mon mieux pour que TwinXeon me plaise et soit utilisable simplement. Je me suis fixé deux contraintes : le navigateur. Je ne supporte que Firefox que je préfère nettement par rapport à IE par exemple, et le site doit être accessible sans redimensionnement dans le navigateur Android par défaut de ma tablette Archos 70 IT.

Rendu...

TwinXeon utilise une feuille de style CSS, générée comme toutes les pages du site au moyen de Java Template Pages.
J'utilise principalement des sections <DIV>, <SPAN> et quelques <TABLE>, mais j'essaie de plus en plus de limiter l'usage de ces dernières.

Par exemple, la Home page de TwinXeon n'utilise pas une seule table dans sa dernière version.

Le rendu est à peu près identique sous Internet Explorer 8 et Firefox 3.6 aux coins arrondis des cadres près.
[TwinXeon sous Firefox]
TwinXeon sous Firefox 3.6.13
[TwinXeon sous IE]
TwinXeon sous Internet Explorer 8
[EDIT du 23/03/2011] le rendu sous Firefox 4 est identique au rendu sous Firefox 3.6.

Génération des pages

Toutes les pages du site, pages JSPs comprises, sont générées via Java Template Page. A l'heure où cet article est rédigé, il faut 43 templates pour générer le site. Une re-génération totale prend en moyenne 1 minute.

Afin de séparer le côté présentation générale de la page du côté design du contenu de page, un premier jeu de templates génère un template de fond de page. Toutes les pages du site sont alors générées à partir de ce template de fond de page. Les autres templates génèrent des fragments HTML qui seront insérés dans le fond de page au dernier moment.

La génération se fait donc en deux passes : génération puis fusion.

Ci dessous, le meta-template de fond de page actuel de TwinXeon. On peut voir qu'il s'agit d'un squelette de template JTP qui définit l'ossature d'une page HTML mais ne fournit presque pas de balises.

<%@page.template type="text/plain" extension=".jtp"%><%@page.import package="org.eclipse.core.resources.*"%><%
   IProject templateProject = (IProject)context.getParameter("template.home");
   String headMeta = context.getParameterValue("head.meta");
   String headScript = context.getParameterValue("head.script");
   String pageFoot = context.getParameterValue("page.foot");
   String menu = context.getParameterValue("page.menu");
   context.setParameter("head.meta",templateProject.getFullPath().toString()
+"/Templates/template/gen/"+headMeta);
   context.setParameter("head.script",templateProject.getFullPath().toString()
+"/Templates/template/gen/"+headScript);
   context.setParameter("head.menu",templateProject.getFullPath().toString()
+"/Templates/template/gen/"+menu);
   context.setParameter("page.footer",templateProject.getFullPath().toString()
+"/Templates/template/gen/"+pageFoot);
   String OPEN = "<"+"%";
   String CLOSE = "%"+">";
   String JTP_OPEN = "<"+"jtp:";
   String JTP_CLOSE = "/"+">";
%><%=OPEN%>
@page.template type="text/plain" extension=".<jtp:getProperty name="page.extension"/>"<%=CLOSE%><%=OPEN%>@page.import package="org.eclipse.core.resources.*"<%=CLOSE%><%=OPEN%>
   IProject templateProject = (IProject)context.getParameter("template.home");
   String pageContent = context.getParameterValue("page.content");
   context.setParameter("page.content",templateProject.getFullPath().toString()
+"/Templates/template/gen/"+pageContent);
<%=CLOSE%><!doctype html><HTML>
<HEAD>
<jtp:include src="$head.meta"/>
<TITLE><jtp:getProperty name="head.title"/></TITLE>
</HEAD>
<jtp:include src="$head.script"/>
<BODY>
<DIV class="main" align="center">
  <DIV class="pageHead" onclick="document.location.replace('/');">
   <DIV style="padding-top: 30px;" align="right"><A href="/about/soft/twinxeon/page.html"><IMG border="0" src="/img/twinTitle.gif" alt="TwinXeon by Renaudet"/></A></DIV>
  </DIV>
  <jtp:include src="$head.menu"/>
  <DIV class="pageBody" align="left">
<%=JTP_OPEN%>include src="$page.content"<%=JTP_CLOSE%>
  </DIV>
  <jtp:include src="$page.footer"/>
</DIV>
</BODY>
</HTML>
Comme on le voit dans cet exemple, le fond de page utilise de multiples inclusions, via la balise <jtp:include/>.
Les fragments imbriqués sont eux-même générés via d'autres sous-templates.

Chaque grand type de jeu de template est déclenché via une option du contexte d'exécution du Template principal de TwinXeon. Ainsi, en cas de modification d'une portion spécifique du site, seules les pages qui ont besoin d'être regénérées le seront.
[Lancement du template principal]
Contexte d'exécution du template principal
Cette page a été regénérée le 23/04/2014 à 23:23:29
Site optimisé pour un affichage en 800x600 sous Firefox 8.x - ©Copyright 2011-2012 by Nicolas Renaudet