Comme je suis un fondu, j’ai voulu refondre l’interface du blog Valhalla, c’est dont la refonte de cet espace que je vous présente ici. Mais cela ne concerne pour l’instant que le blog lui même, pas les photos ni les ressources, car c’est pas mal de boulot et je ne suis pas uen fonderie à refontes !
Avant
Le blog Valhalla a été conçu au départ en pur HTML, grâce à des tempaltes sous Dreamweaver (ça ne date pas d’hier !). Je ne pouvais pas faire autrement, mon hébergeur n’ayant pas de serveur PHP. Je ne pouvais donc pas avoir recours à un logiciel intégré de blog (comme Dotclear), ni à des includes PHP pour répéter sur chaque page le contenu statique (le menu de gauche).
Mais les templates DW ça va un moment. Après, ça devient lourd. Alors on commence par céder à la facilité et détacher la page du template à la moindre difficulté. Et puis le temps passe et on prend l’habitude de détacher systématiquement la page de son template d’origine. Et là, quand on veut changer la présentation ou au moins la charte graphique, ça devient une prise de tête monstre à devoir ouvrir dans le bloc-note chaque fichier HTML pour l’éditer manuellement. En plus, entre nous, DW est cool mais il génère du code HTML complètement pourrave, ne serait-ce que du point de vue des indentations (au final c’est toalement illisible).
Alors comme je ne tiens pas en place et que je change toujours tout, j’ai décidé de refaire tout l’espace Valhalla en PHP et includes XHTML + CSS. De cette manière, il n’y a plus qu’à changer le CSS pour tout changer. Les sources HTML ne changent pas.
Après
Structure
L’espace Valhalla s’ouvre sur un index.php. Cet index au code pour l’instant tout à fait spartiate représente la logique générale de fonctionnement du site.
En voici le code:
<?php
include("header.php");
$output = ‘<a href="articles.php">Voir les articles</a>’;
echo $output;
include("footer.php");
?>
C’est du pur PHP, avec 2 includes et un corps. Le corps n’a qu’un lien pour l’instant. Les includes sont l’en-tête (header) et le pieds de page (footer). Bien sûr, le contenu va rapidement évoluer pour présenter une page d’accueil honorable.
Vient ensuite le système de chargement des articles. Et là c’est plus complexe. Les articles se chargent grâce au fichier articles.php qui analyse les requêtes GET.
<?php
include("header.php");
if(isset($_GET[‘q’]))
{ include("articles/".$_GET[‘q’].".htm");
}
else
{ include("articles/articles_index.htm");
}
include("footer.php");
?>
On appelle cette page grâce à un lien. Le lien peut revoyer vers articles.php, et dans ce cas GET est vide et la page articles_index.htm s’affichera; ou vers articles.php?q=XXXX, et dans ce cas XXXX se chargera. XXXX est un fichier se terminant obligatoirement par l’extension HTM (pour éviter tout contenu dynamique), et situé dans le répertoire articles. Ces deux restrictions comblent définitivement la potentielle faille de sécurité des includes générés avec GET.
Mise en page (layout)
La mise en page est définie dans 4 fichiers. Les fichiers header.php, XXXX, footer.php et le fichier de feuille de style CSS. Les fichiers PHP et XXXX (HTML) définissement les conteneurs et le contenu, tandis que le fichier CSS détermine la disposition et les propriété des conteneurs.
Voici header.php
<?php
$output = ‘<html>’;
$output .= ‘<head>’;
$output .= ‘<link rel="stylesheet"
type="text/css"
media="screen"
href="valhalla.css" />’;
$output .= ‘</head>’;
$output .= ‘<body>’;
$output .= ‘<div id="bodyleft"><div id="bodyright">’;
$output .= ‘<div id="header"> Valhalla φ GF@Blog</div>’;
$output .= ‘<div id="container">’;
$output .= ‘<div class="menuContainer">’;
$output .= ‘<div class="menu">’;
$output .= ‘<ul>
<li /><a href="">Accueil</a>
<li /><a href="">Ressources</a>
<li /><a href="">Photos</a>
<li /><a href="">Privé</a>
<li id="current"/><a href="./articles.php">Articles</a>
<ul>
<li /><a href="./articles.php?q=/2005/09/index">Sept. 2005</a>
(etc…)
<li /><a href="./articles.php?q=/2004/10/index">Oct. 2004</a>
<li /><a href="./articles.php?q=/2004/09/index">Sept. 2004</a>
<li /><a href="./articles.php?q=/2004/08/index">Aout 2004</a>
</ul>
</ul>’;
$output .= ‘</div><!– Ends div menu –>’;
$output .= ‘</div><!– Ends div menuContainer –>’;
$output .= ‘<div class="contentContainer">’;
echo $output;
?>
et footer.php
<?php
$output = ‘</div><!– Ends div contentContainer –>’;
$output = ‘</div><!– Ends div container –>’;
$output .= ‘<div id="footer">Copyright © 2005 www.gfblog.com</div>’;
$output .= ‘</div></div><!– Ends divs bodyleft & bodyright –>’;
$output .= ‘</body>’;
$output .= ‘</html>’;
echo $output;
?>
Les fichiers contenant le contenu (XXXX.htm) auront toujours la structure suivante:
<div class="titre">
<h1>Titre</h1>
<h2>Sous-titre</h2>
</div>
<div class="corps">
<!– Ici, le corps du texte. –>
</div>
Tout cela combiné permet d’afficher la structure suivante:
Cette structure d’obtient grâce à la feuille de style dont voici la code source:
/################### CONTENEURS PRINCIPAUX ##################################/
body
{ background: #e7e7e7; /* Couleur du fond de la page /
line-height: 1.2; / Hauteur de ligne: décalage du titre depuis le haut /
margin: 0px 10px 0px 10px; / Marges droite et gauche de la page /
padding: 0px; / Pas de marge interne */
}
/* Calque pour la bordure gauche du cadre principal /
#bodyleft
{ padding: 0px 0px 0px 5px; / 5 pixels de décalage depuis la gauche pour afficher l’image de 5 px /
background: #FFFFFF url(images/border_left.png) repeat-y; / L’image de fond */
}
/* Calque pour la bordure droite du cadre principal /
#bodyright
{ padding: 0px 5px 0px 0px; / 5 pixels de décalage depuis la droite pour afficher l’image de 5 px /
background: #FFFFFF url(images/border_right.png) repeat-y; / L’image de fond /
background-position: right top; / L’image doit être affichée à droite en partant du haut */
}
/* En tête /
#header
{ width: 100%;
text-align: left;
height: 40px;
background: #066fd4 url(images/header.png) repeat-x;
color: #FFFFFF;
text-shadow: 0px 1px 2px #001f2f;
font-weight: bold;
font-size: 22px;
padding: 10px 0px 0px 0px; / Supérieur - Droit - Inférieur - Gauche */
font-family: ‘Geneva’, ‘Lucida Grande’, LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}
#footer
{ clear: both; /* Permet d’afficher le bloc en dessous de tout /
width: 100%;
text-align: center;
height: 30px;
background: #066fd4 url(images/footer.png) repeat-x;
color: #FFFFFF;
text-shadow: 0px 1px 2px #001f2f;
margin: 0;
font-weight: normal;
font-size: 12px;
padding: 10px 0px 0px 0px; / Supérieur - Droit - Inférieur - Gauche */
font-family: ‘Geneva’, ‘Lucida Grande’, LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
}
/* Conteneur de toute la page /
#container
{ width: 100%;
margin: 0px auto;
text-align: left;
color: #3e3e3e;
background-color: #e7e7e7;
font-family: ‘Geneva’, ‘Lucida Grande’, LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
/border-left: 1px groove #000000;/
}
/################### POSITIONNEMENT - LAYOUT ################################*/
/* Conteneur du menu */
.menuContainer
{ width: 15%;
float: right;
}
/* Conteneur du corps */
.contentContainer
{ width: 85%;
float: left;
padding 10px 0 20px 5px;
background: #FFFFFF;
}
/################### APPARENCE ###############################################/
/ Le menu */
.menu
{ line-height: 1.7em;
}
.menu ul
{ list-style: none;
margin: 10px 0px 0px 0px 0px; /* Décalage depuis le haut /
padding: 0px 0px 0px 15px; / Décalage depuis la gauche */
}
.menu ul ul
{ text-align: right;
list-style: none;
line-height: 1.2em;
font-weight: normal;
margin: 10px 0px 0px 0px 0px; /* Décalage depuis le haut /
padding: 0px 30px 0px 0px; / Décalage depuis la droite (puisqu’aligné à droite) */
}
.menu li
{ /* Hérite de .menu a */
}
.menu #current
{ color: #999999;
font-weight: bold;
}
.menu a {
display: block;
color: #b3b3b3;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: none;
padding-left: 10px;
font-size: 12px;
}
.menu a:hover {
color: #007afa;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: none;
font-size: 12px;
}
/* Le titre */
.titre
{ width: inherit;
height: auto;
text-align: left;
background: #FFFFFF;
margin: 0 0 0 30px;
line-height: 10px;
}
.titre h1
{ color: #066fd4;
font-size: 26px;
font-weight: normal;
margin-bottom: 1px;
text-shadow: 0px 1px 2px #001f2f;
line-height: 30px;
}
.titre h2
{ color: #066fd4;
font-size: 14px;
font-weight: normal;
margin-bottom: 3px;
}
/* Le corps */
.corps
{ width: 90%;
padding-right: 30px;
padding-left: 30px;
font-family: ‘Geneva’, ‘Lucida Grande’, LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
font-size: 12;
text-align: justify;
line-height: 1.7em;
}
.corps .forcebg /* A utiliser dans les index.htm */
{ height:100%;
}
.corps a
{ color: #007afa;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: none;
font-size: 12px;
}
.corps a:hover {
color: #007afa;
text-shadow: 0px 1px 0px #ffffff;
text-decoration: underline;
font-size: 12px;
}
.corps td
{ font-size: 12;
padding: 5px 5px 5px 5px;
}
/##################### CLASSES GLOBALES ####################################/
h1 {
color: #066fd4;
font-size: 24px;
font-weight: normal;
margin-bottom: 10px;
padding-top: 10px;
}
h2 {
color: #066fd4;
font-size: 20px;
font-weight: normal;
margin-bottom: 5px;
line-height: 15px;
}
h3 {
color: #066fd4;
font-size: 18px;
font-weight: normal;
margin-bottom: 3px;
margin-left: 15px;
}
h4 {
color: #066fd4;
font-size: 16px;
font-weight: normal;
margin-bottom: 3px;
margin-left: 30px;
}
h5 {
color: #066fd4;
font-size: 14px;
font-weight: normal;
margin-bottom: 3px;
margin-left: 45px;
}
/##################### MISCELLANEOUS ########################################/
.Code {
font-family: "Courier New", Courier, mono;
font-size: 14px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: darkorange;
text-align: left;
}
Bien entendu, tout cela va évoluer, et le CSS ne restera pas tel qu’il est exposé
ci-dessus. De même, le code PHP sera enrichi. Mais la structure globale restera celle-ci
jusqu’à une prochaine mise à jour.
à Carpentras le 11/09/2005