que l'on trouve sur la plupart des sites internet construits actuellement. Les éléments sont plus spécifiques et permettent une structure commune des sites..." /> que l'on trouve sur la plupart des sites internet construits actuellement. Les éléments sont plus spécifiques et permettent une structure commune des sites..." /> que l'on trouve sur la plupart des sites internet construits actuellement. Les éléments sont plus spécifiques et permettent une structure commune des sites..." />
Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Structure d'un thème (2/4) : structure générale

- Auteur : Brunofaisart

Les nouveaux thèmes adoptent les balises telles que <header> pour remplacer les <div id= "header"> que l'on trouve sur la plupart des sites internet construits actuellement.
Les éléments sont plus spécifiques et permettent une structure commune des sites et ainsi une meilleure accessibilité puisqu'une structure commune permettra entre autre aux synthétiseurs vocaux de se développer et aux personnes mal voyantes de se repérer plus facilement.
De nouvelles fonctionnalités permettront aussi d'utiliser HTML et uniquement HTML en natif, au lieu d'y implémenter toute une série de plugins JavaScript voire d'extensions propriétaires.

En utilisant comme modèle le schéma ci-dessous nous allons voir comment afficher dans ces zones HTML nos informations de blog :

Structure d'un thème (2/4) : structure générale

LE HEADER

C'est ici que nous allons afficher nos informations de blog :

1-titre du blog

2-description courte du blog

3-un lien vers la page contact

4-afficher en fond de zone <header> un logo au format JPEG ou PNG

Mais avant toute chose il nous faut dire au navigateur que le document est une page HTML5 et inclure dans son entête <HEAD> les éléments utilisés par la page Javascripts, styles et informations SEO ou de référencement (titre de la page, description de la page, mots-clefs de la page).

Les variables Overblog/Twig utilisées pour ce fragment de code sont :

Le paramétrage de la langue par défaut du Blog :
    	{{ Blog.Lang|default('fr') }}
Le titre du Blog :
		{{Blog.Title}}
La description du Blog:
		{{Blog.Description}}
Le lien de retour vers accueil du Blog :
		{{Blog.Url}}
Activation du flux RSS du Blog :
		{{ Blog.RssUrl }}
Retrouver tous les tags/catégories du blog
        {% list Post.Tags %}
Afficher intitulé du tag
        {{ Tag.Title }}

Déclaration du type de page (ici HTML5) et source du descriptif de page, d'activation des scripts et des styles.

<!DOCTYPE html>
<html lang="{{ Blog.Lang|default('fr') }}">
    <head>    
    		<!-- titre, descriptions, mots-clefs -->
			<title>{{Blog.Title}}</title>
			
			<meta name="description" content="{{ Blog.Description }}" />
			
			<!-- Pour les mots clefs à l'attention des moteurs de recherche
			on relit l'ensemble des tags/catégories publiés du blog -->
			<meta name="keywords" content="{% list Post.Tags %}{{ Tag.Title }}{% if loop.last == false %}, {% endif %}{% endlist %}" />
			
			<meta name="robots" content="index,follow" />
			<meta http-equiv="content-type" content="text/html; charset=utf-8" />
			
			<!-- les javascripts de base pour un bon fonctionnement du thème-->
			
			<!-- Librairie JQUERY importante et nécessaire pour tous les thèmes!! -->
			<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
			
			<!-- Librairie Fancybox pour afficher en pop-in un zoom de vos images et photos -->
			<link rel="stylesheet" type="text/css" href="http://assets.over-blog-kiwi.com/themes/jquery/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
			<script type="text/javascript" src="http://assets.over-blog-kiwi.com/themes/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
			
			
			<!-- Nous Allons maintenant déclarer des styles d'affichage basiques pour nos zones
			du thème minimaliste exemple. Les styles afficheront la même chose que sur le schéma
			ci-dessus  -->
			
			<STYLE>
			
			  html			{background:transparent URL() top left no-repeat;}
				body			{background-color:transparent;width:100%;margin:2px;}
				header		{border:1px solid black;background-color:yellow;color:black;border-radius:8px;width:95%;height:150px;margin-bottom:38px;}
				nav				{border:1px solid black;background-color:orange;color:black;border-radius:8px;width:33%;display:block;float:left;margin-right:4px;}
				#content	{border:1px solid black;background-color:#D0E1C1;color:black;border-radius:8px;width:66%;display:block;float:left;}
				article		{border:1px solid black;background-color:cyan;color:black;border-radius:8px;width:90%;display:block;margin-bottom:38px;}
				footer		{border:1px solid black;background-color:pink;color:black;border-radius:8px;width:95%;height:96px;margin-top:38px;}
				
			</STYLE>
		
		</HEAD>		

Maintenant que nous avons défini le descriptif de la page thème , activer les scripts et les styles, il nous faut maintenant pouvoir afficher le résultat sous forme d'une page Web. Pour ce faire nous allons créer notre <BODY>. Dans un premier temps pour vérifier la cohérence de notre mise en page nous allons créer une page avec du faux texte :

<BODY>
    			  <HEADER>Ceci est le titre de mon Blog et sa description</HEADER>
				  
				  <NAV>
				  	<!-- ici débute la zone de navigation -->
				  	<UL>
				  		<LI>Element de navigation #1</LI>
				  		<LI>Element de navigation #2</LI>
				  		<LI>Element de navigation #3</LI>
				  		<LI>Element de navigation #4</LI>
				  		<LI>Element de navigation #5</LI>
				  	</UL>
				  </NAV>
				  <DIV ID="content">
						  <ARTICLE>
						  	<H1>TITRE DE MON POST #1</H1>
						  	<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>
						  </ARTICLE>
						  <ARTICLE>
						  	<H1>TITRE DE MON POST #2</H1>
						  	<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>
						  </ARTICLE>
						  <ARTICLE>
						  	<H1>TITRE DE MON POST #3</H1>
						  	<P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</P>
						  </ARTICLE>  
				  </DIV>
				  <FOOTER>&copy Bruno 2012;&nbsp;|&nbsp;Contactez moi&nbsp;|&nbsp;A propos</FOOTER>
		</BODY>	

Cette structure est très simpliste mais permet de mieux apréhender comment positionner nos différents éléments d'un thème. J'ai volontairement pour mes tailles d'affichage de zones travaillé en pourcentage pour avoir une taille relative à la largeur de l'écran de l'internaute.

Le code complet pour ce petit tuto.

Copiez le intégralement (faire CTRL-A puis CTRL-C au clavier) pour faire le test en le collant dans ADMIN>THEME>HTML en ayant pris soin d'effacer le code HTML existant dans votre admin, ne faites pas sauver une fois l'opération effectuée mais simplement PREVISUALISER

La suite au prochain post avec l'affichage de vos posts sur ce même exemple...

Voir aussi :

Structure d'un thème (1/4) : généralités HTML 5

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Iv-oam 15/09/2012 13:09

Bjr,
je me trompe ou les designs proposés n'utilisent pas les balises article et nav ?

Alice 22/08/2012 11:39

Je viens de tester et - à part le fait que tu as choisi des couleurs abominables ! - ça marche très bien.

Bruno admin créateur de ce blog 22/08/2012 11:43

Alice,
Les couleurs abominables c'est chouette pour bien distinguer les zones. HAHAHAHAHAHA !!!

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...