TwinXeon by Renaudet
/Accueil/Tous les articles
Le TwinXeon nouveau est arrivé !
Préambule...

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 des pages

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  9 et Firefox 9, c'est là le principal.


rendu sous Firefox 9.0.1


rendu sous IE 9.0.4

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.


Contexte d'exécution du template principal

Génération dynamique, TwinXeon devient un CMS

Depuis le 8 janvier 2012, TwinXeon devient un vrais CMS (Content Management Server) permettant de créer, éditer, supprimer et publier les documents, entrées de blog et articles du site en ligne.

La première version utilisait AJAX de manière intensive, jusque sur la Home page de TwinXeon. Mais AJAX ne permet pas le référencement des liens. J'ai donc modifié le serveur pour rediriger les requêtes sur la Home page vers une URL dynamique. La page d'accueil de TwinXeon est maintenant une page JSP qui agrège le résultat de requêtes JDBC pour présenter une vision toujours à jour des entrées de blog et des articles.

L'éditeur de texte WYSIWYG est 100% maison et utilise AJAX et JavaScript. En voici une copie d'écran :



Un gestionnaire de document permet de filtrer les documents par type, éditer ou supprimer un document :



Dorénavant, les mises-à-jour du site sont instantanées. Par contre, je n'ai pas encore trouvé le moyen de permettre l'inclusion d'images en deux versions sur le site (petite, large). Il me faudrait un processeur d'image côté serveur. Je sais le faire avec l'API AWT, mais j'ai un peu la flemme...

[la base de l'article a été reprise du site statique et éditée depuis le nouvel éditeur WYSIWYG de TwinXeon]

Ajoutez votre commentaire :
  Votre pseudo :
  Votre adresse mail (obligatoire):
  Votre commentaire :
 
Site optimisé pour un affichage en 800x600 sous Firefox 8.x - ©Copyright 2011-2012 by Nicolas Renaudet