Réaliser un site vitrine

Type de document :

Documentation et tutoriels

Solution(s) :

e-majine

Module(s) :

Module de base

Réaliser un site vitrine

Pour réussir une intégration de qualité, vous devez bien prendre en compte les fonctionnalités disponibles et quels sont les fichiers qui en découlent.

Module de base
- Liste des fichiers du module
  - Les actualités dans e-majine
  - Les actualités dans saytup
Module de recherche
Module Annuaire

Module de base

Il est fourni pour tout type de projet et vous permet de gérer plusieurs fonctionnalités tels que :

Affichage d'une rubrique publiant un article
Affichage d'une rubrique publiant des articles
Affichage d'une rubrique publiant des actualités
Affichage d'une rubrique de formulaire
Gestion de ressources (actualités, articles, préformatés...)
Gestion de médias (images, diaporama, pdf, ...)

Liste des fichiers du module

(Tous ces fichiers se trouvent dans /modeles/Langue_du_modèle/Nom_du_modele).

/css/styles.css	Feuille de styles CSS pour la mise en forme des éléments HTML
/form/creator_form.html	Structure HTML de la méthode de publication "Publier un formulaire"
/navigation/nested_navigation_elements.html	Structure HTML du menu de navigation standard
/publication_methods/articles/multi_articles.html	Structure HTML de la méthode de publication "Publier des articles"
/publication_methods/articles/multi_articles_detail.html	Structure HTML du résumé d'un article appelé par le fichier multi_articles.html
/publication_methods/articles/single_article.html	Structure HTML de la méthode de publication "Publier un article"
/structure/error.html	Structure HTML de la page d'erreur ou page vide
/structure/error404.html	Structure HTML de la page 404
/structure/mainPage.html	Structure HTML de toute page du modèle de projet
/structure/mainPrint.html	Structure HTML de toute page du modèle de projet lors d'une impression

Selon que vous utilisez izi-media, e-majine ou saytup, les actualités ne sont pas gérées de la même manière au niveau du module de base. Voyons quelles sont les différences.

Les actualités dans e-majine et izi-media

La méthode utilisée s'intitule "Publier des actualités" dans l'administration de votre site. Voyons les différents éléments à votre disposition :

Widget "Derniers éléments"

(Classe CSS associée : widgetLastElements)

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/boxes/last_elements/last_elements.html, ce widget va vous permettre de remonter les actualités de votre site sous leur forme résumée. Deux types d'affichage sont disponibles, soit les unes en dessous des autres avec le code suivant :

<mx:bloc id="statics">
	<div class="widgetContainer">
		<mx:bloc id="news">
			<div class="news">
				<mx:bloc id="title"> 
					<h3><a  class="widgetLastElementsTitle" ><span><mx:text id="content_title" /></span></a></h3>
				</mx:bloc id="title">
			
				<mx:bloc id="picture"> 
					<div class="widgetLastElementsPicture">
						<mx:text id="content_picture" />
					</div>
				</mx:bloc id="picture">
		
				<mx:bloc id="description"> 
					<div class="widgetLastElementsDescription">
						<mx:text id="content_description" />
					</div>
				</mx:bloc id="description">
				<a  class="widgetLastElementsLink" ><span><mx:text id="view_more" /></span></a>
			</div>	
		</mx:bloc id="news">
	</div>
</mx:bloc id="statics">

Soit elles s'affichent sous une forme dite "dynamique", présentant un effet de transition entre chaque actualité. Pour cela, vous devez utiliser le code suivant :

<mx:bloc id="dynamics">
	<div class="widgetContainer">
		<,-- Pour que le deroulement dynamique fonctionne, il est recommendé de définir la meme hauteur en pixel et l'overflow sur hidden, pour le div parent, et les div de chaque element. -->
		<div  style="height:170px; overflow:hidden;">
			<noscript>
				<div>
				<mx:bloc id="noscript">
				
					<mx:bloc id="title">
						<h3><a ><mx:text id="content_title" /></a></h3>
					</mx:bloc id="title">
					
					<mx:bloc id="picture"> 
						<div class="widgetLastElementsPicture">
							<mx:text id="content_picture" />
						</div>
					</mx:bloc id="picture">
					
					<mx:bloc id="description"> 
						<div class="widgetLastElementsDescription">
							<mx:text id="content_description" />
						</div>
					</mx:bloc id="description">
					
				<a  class="widgetLastElementsLink" ><span><mx:text id="view_more" /></span></a>
				</mx:bloc id="noscript">
				</div>
			</noscript>	
					
			<mx:bloc id="news">
				<div class="news">
					<div style="height:170px; overflow:hidden">
							<mx:bloc id="title">
								<h3><a ><mx:text id="content_title" /></a></h3>
							</mx:bloc id="title">
							
							<mx:bloc id="picture"> 
								<div class="widgetLastElementsPicture">
									<mx:text id="content_picture" />
								</div>
							</mx:bloc id="picture">
							
							<mx:bloc id="description"> 
								<div class="widgetLastElementsDescription">
									<mx:text id="content_description" />
								</div>
							</mx:bloc id="description">
							
						<a  class="widgetLastElementsLink" ><span><mx:text id="view_more" /></span></a>
					</div>
				</div>
			</mx:bloc id="news">
		</div>

		<script type="text/javascript">
			<,--
				delay		= 20;		/* delay : temps en millisecondes entre chaque déplacement */
				increment	= 4;		/* increment : nombre de pixels de chaque déplacement */
				pause		= 2000;		/* pause : temps en millisecondes d'attente sur chaque élément */
				
				<mx:text id="scroller_name"/> = new scroller('<mx:text id="scroller_name"/>', '<mx:text id="frame_id"/>', delay, increment, pause);
			-->
		</script>
	</div>
</mx:bloc id="dynamics">

Méthode de publication "Publier des actualités"

(Identifiant CSS associé : newsList)

Basé sur le template /modeles/Langue_du_site/Nom_du_modele/publication_methods/news/news.html, cette méthode de publication une fois appliquée à une rubrique, celle-ci remontera une liste d'actualités avec un pager si cela est nécessaire. Pour afficher les actualités de votre rubrique, insérez le code suivant :

<mx:bloc id="news_list">
	<div id="newsEventsList">
		<h1><mx:heading_label /></h1>
		<mx:bloc id="news">
			<div class="newsContainer">
				<div  class="news_event">
					<h2><mx:text id="news_title" /></h2>
					<mx:bloc id="picture"><div class="chapoPicture"><mx:text id="picture" /></div></mx:bloc id="picture">

					<div class="textRight">
						<mx:bloc id="date">
							<div class="date"><mx:text id="date" /></div>
						</mx:bloc id="date">
						<mx:bloc id="period">
							<div class="period"><mx:text id="period" /></div>
						</mx:bloc id="period">
						<mx:bloc id="description">
							<div class="description"><mx:text id="description" /></div>
						</mx:bloc id="description">
						<div class="linksmore">
							<a  class="newsLink" ><span><mx:text id="en_savoir_plus" /></span></a>
						</div>

						<,-- Donnees relative aux commentaires -->
						<mx:bloc id="comments_datas">
							<div class="commentsDatas">
								<mx:bloc id="link">
									<a  class="commentsDatasLink" ><span><mx:text id="label" /></span></a>
								</mx:bloc id="link">
								<mx:bloc id="last_comment_date" ><span class="lastCommentDate" ><mx:text id="date" /></span></mx:bloc id="last_comment_date">
								<mx:bloc id="last_commenter" ><span class="lastCommenter"><mx:text id="name" /></span></mx:bloc id="last_commenter">
							</div>
						</mx:bloc id="comments_datas">

						<,-- Donnees relative aux notes -->
						<mx:bloc id="ratings_datas">
							<div class="ratingsDatas" ><mx:text id="content" /></div>
						</mx:bloc id="ratings_datas">
					</div>
				</div>
				<mx:bloc id="separator"><hr class="clear" /></mx:bloc id="separator">
			</div>
		</mx:bloc id="news">

		<mx:bloc id="pager">
			<mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
			<mx:bloc id="previous">&lt;</mx:bloc id="previous">
			<mx:bloc id="last">&gt;&gt;</mx:bloc id="last">
			<mx:bloc id="next">&gt;</mx:bloc id="next">
			<mx:bloc id="separator">&nbsp;</mx:bloc id="separator">
			<div class="pager"><mx:bloc id="items"><mx:text id="spacer" /><a ><mx:text id="item" /></a></mx:bloc id="items"></div>
		</mx:bloc id="pager">
	</div>
	<hr class="separator" />
</mx:bloc id="news_list">

Des archives peuvent également être remontées avec cette méthode. Pour cela, le code suivant est nécessaire :

<mx:bloc id="archives_link">
	<p class="newsArchivesLink"><a  ><span>Voir les archives</span></a></p>
</mx:bloc id="archives_link">

<mx:bloc id="archives_list">
	<div id="newsArchives">
		<table>
			<caption>Historique</caption>
			<thead>
				<tr>
					<th>titre</th>
					<th>date</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>titre</th>
					<th>date</th>
				</tr>
			</tfoot>
			<tbody>
				<mx:bloc id="archives">
					<tr >
						<td><a  class="newsArchiveTitle" ><span><mx:text id="news_archive_title" /></span></a></td>
						<td><mx:text id="news_archive_date" /></td>
					</tr>
				</mx:bloc id="archives">
			</tbody>
		</table>

		<mx:bloc id="pager">
			<mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
			<mx:bloc id="previous">&lt;</mx:bloc id="previous">
			<mx:bloc id="last">&gt;&gt;</mx:bloc id="last">
			<mx:bloc id="next">&gt;</mx:bloc id="next">
			<mx:bloc id="separator">&nbsp;</mx:bloc id="separator">
			<div class="pager"><mx:bloc id="items"><mx:text id="spacer" /><a ><mx:text id="item" /></a></mx:bloc id="items"></div>
		</mx:bloc id="pager">
		<hr class="separator" />
	</div>
</mx:bloc id="archives_list">

Liste des fichiers

(Tous les fichiers se trouvent dans /modeles/Langue_du_modele/Nom_du_modele/).

/boxes/last_elements/last_elements.html	Widget de mise en avant des dernières actualités
/publication_methods/news/news.html	Structure HTML affichant aussi bien une liste d'actualités qu'une actualité complète
/publication_methods/news/news_detail.html	Structure HTML d'une actualité détaillée

Nous conseillons désormais plutôt la méthode "Publier un blog" pour gérer les actualités dans e-majine sous forme de billets de blog. Cette méthode est dépendante du module Blog.

Les actualités dans saytup

Dans cette solution, nous utiliserons la méthode "Publier un blog", qui combine les méthodes "Publier des actualités", "Publier un blog" et "Publier des billets de blog" en une seule.

Widget "Auteurs"

(Classe CSS associée : widgetBlogAuthors)

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/boxes/authors.html, ce widget permet comme son nom l'indique de remonter les différents auteurs associés à une rubrique utilisant une méthode de publication "Publier un blog". Il peut les afficher sous deux formes, tout d'abord en liste à l'aide du code suivant :

<mx:bloc id="list_mode">
	<ul>
		<mx:bloc id="li">
			<li><a ><span><mx:text id="label" /></span></a></li>
		</mx:bloc id="li">
	</ul>
</mx:bloc id="list_mode">

Ou bien sous la forme d'un select, à partir de la structure suivante :

<mx:bloc id="select_mode">
	<form method="post" >
		<div class="row">
			<label for="authorid"><mx:text id="label"/></label>
			<select name="author" id="authorid">
				<mx:bloc id="options">
					<option ><mx:text id="option" /></option>
				</mx:bloc id="options">
			</select>
		</div>
		<div class="submit">
			<input type="submit" name="button"  />
		</div>
	</form>
</mx:bloc id="select_mode">

Widget "Calendrier"

(Classe CSS associée : widgetCalendar)

Ce widget est basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/boxes/calendar.html, Avec ce widget, les différents billets associés à un blog sont classés par date. Vous retrouvez dès lors un tableau représentant un calendrier avec possibilité de naviguer dans les mois affichés :

<table class="calendar">
	<caption>
		<mx:text id="caption" />
	</caption>
	<thead>
		<tr class="calendarNav">
			<th><a >&lt;</a></th>
			<th><a >&lt;&lt;</a></th>
			<th colspan="3"><a ><mx:text id="today" /></a></th>
			<th><a >&gt;&gt;</a></th>
			<th><a >&gt;</a></th>
		</tr>
		<tr class="calendarDays">
			<mx:bloc id="days">
				<th><mx:text id="day_label" /></th>
			</mx:bloc id="days">
		</tr>
	</thead>
	<tbody>
		<mx:bloc id="weeks">
			<tr>
				<mx:bloc id="days_number">
					<td >
						<,-- Bloc affichant un lien si le jour contient des elements -->
						<mx:bloc id="link"><a ><mx:text id="day" /></a></mx:bloc id="link">
						<mx:bloc id="no_link"><mx:text id="day" /></mx:bloc id="no_link">
					</td>
				</mx:bloc id="days_number">
			</tr>
		</mx:bloc id="weeks">
	</tbody>
</table>

Widget "Mise en avant de billets"

(Classe CSS associée : widgetHighlightPosts)

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/boxes/highlight_posts.html, ce widget vous permet de remonter un ensemble de billets associés à un blog avec un ordre de tri (derniers publiés, mieux notés, ...). Ces billets sont alors présentés sous une forme résumée, à l'aide du code suivant :

<mx:bloc id="highlighted_post">
	<div class="widgetHighlightPost">
		<div class="widgetHighlightPostContainer">
			<h3><mx:text id="libelle" /></h3>
			<div class="widgetHighlightPostDate"><mx:text id="date_crea" /></div>
			<mx:bloc id="author">
				<div class="widgetHighlightPostAuthor"><mx:text id="author" /></div>
			</mx:bloc id="author">

			<mx:bloc id="description">
				<div class="widgetHighlightPostDescription"><mx:text id="description" /></div>
			</mx:bloc id="description">
			<,-- Nombre max de caracteres pour la description -->
			<mx:bloc id="nb_char_max_description">100</mx:bloc id="nb_char_max_description">
			<,-- Extension utilisee lorsque la description est tronquee -->
			<mx:bloc id="extension_description">...</mx:bloc id="extension_description">

			<mx:bloc id="thumbnail">
				<div class="widgetHighlightPostThumbnail"><mx:text id="thumbnail" /></div>
			</mx:bloc id="thumbnail">

			<div class="linksmore">
				<a  class="widgetHighlightPostLink">
					<span><mx:text id="label" /></span>
				</a>
			</div>

			<,-- Donnees relatives aux commentaires -->
			<mx:bloc id="comments_datas">
				<mx:bloc id="link"><a  class="BlogCommentsLink"><span><mx:text id="label" /></span></a></mx:bloc id="link">
				<mx:bloc id="last_comment_date"><div class="BlogCommentsDate"><span><mx:text id="date" /></span></div></mx:bloc id="last_comment_date">
				<mx:bloc id="last_commenter"><div class="BlogCommentsCommenter"><span><mx:text id="name" /></span></div></mx:bloc id="last_commenter">
			</mx:bloc id="comments_datas">

			<,-- Donnees relatives aux notes -->
			<mx:bloc id="ratings_datas">
				<div class="BlogRating"><mx:text id="content" /></div>
			</mx:bloc id="ratings_datas">
		</div>
	</div>
</mx:bloc id="highlighted_post">

Widget "Nuage de tags"

(Classe CSS associée : widgetTagcloud)

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/boxes/tag_cloud.html, ce widget vous permet de remonter l'ensemble des tags associés aux différents billets d'un blog.

Méthode de publication "Publier un blog"

(Classes CSS associées : blogPostsList (liste de billets) / blogPostDetail (détail d'un billet))

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/publications_methods/posts.html, remontez au travers de cette méthode un nombre défini depuis l'administration de billets associés à un blog. Les premiers éléments que la méthode vous permet de remonter sont les éléments propres au blog (titre, description, ...), avec le code suivant :

<,-- Titre et description -->
<h1><mx:text id="title" /></h1>

<mx:bloc id="description">
	<div class="PostDescription" ><mx:text id="description" /></div>
</mx:bloc id="description">

Retrouvez ensuite un ensemble de titres utilisés dans le cas où vous êtes arrivés sur le blog à partir d'un widget associé au blog, par exemple le widget "Tags" :

<,-- Affiche "Billets avec le tag ..." si recherche par tag -->
<mx:bloc id="results_by_tag">
	<h3 class="PostsResultsByTag" ><mx:text id="msg" /> : <mx:text id="tag" /></h3>
</mx:bloc id="results_by_tag">

<,-- Affiche "Billets ecrits par ..." si recherche par author -->
<mx:bloc id="results_by_author">
	<h3 class="PostsResultsByAuthor" ><mx:text id="msg" /> : <mx:text id="author" /></h3>
</mx:bloc id="results_by_author">

<,-- Affiche "Billets publies le ..." si recherche par date -->
<mx:bloc id="results_by_date">
	<h3 class="PostsResultsByDate" ><mx:text id="msg" /> : <mx:text id="date" /></h3>
</mx:bloc id="results_by_date">

Il est également possible d'activer la contribution dans l'administration pour que chaque visiteur sur votre site puisse créer un billet de blog s'il le désire, à l'aide du code suivant :

<,-- Lien pour l'ajout d'un billet si l'option contribution est active -->
<mx:bloc id="contribute">
	<span class="contribute"><a ><span><mx:text id="label" /></span></a></span>
</mx:bloc id="contribute">

Dans le cas où le blog ne remonte aucun résultat, le code suivant est interprété :

<,-- Message dans le cas ou aucun billet n'est trouve -->
<mx:bloc id="no_results">
	<h4 class="PostNoResult" ><mx:text id="msg" /></h4>
</mx:bloc id="no_results">

Pour afficher l'ensemble des billets associés au blog sous leur forme résumée, le code suivant est requis :

<,-- Liste des billets -->
<mx:bloc id="posts">

	<,-- Liste de billets -->
	<mx:bloc id="post">
		<div class="post"><mx:text id="post" /></div>
	</mx:bloc id="post">

	<,-- Pager -->
	<mx:bloc id="pager">
		<mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
		<mx:bloc id="previous">&lt;</mx:bloc id="previous">
		<mx:bloc id="last">&gt;&gt;</mx:bloc id="last">
		<mx:bloc id="next">&gt;</mx:bloc id="next">
		<mx:bloc id="separator">&nbsp;</mx:bloc id="separator">
		<div class="pager">
			<mx:bloc id="items">
				<mx:text id="spacer" /><a ><mx:text id="item" /></a>
			</mx:bloc id="items">
		</div>
	</mx:bloc id="pager">
</mx:bloc id="posts">

Dans le cas où l'utilisateur clique sur un lien présent dans le résumé d'un des billets du blog, le détail du billet est alors appelé au moyen du code suivant :

<,-- Detail d'un billet -->
<mx:bloc id="post">
	<div class="postDetail" >
		<mx:text id="detail" />
	</div>
</mx:bloc id="post">

Liste des fichiers nécessaires

(Tous les fichiers se trouvent dans /modeles/Langue_du_modele/Nom_du_modele/community).

/blog/boxes/authors.html	Widget remontant la liste des auteurs de billets
/blog/boxes/calendar.html	Widget affichant un calendrier pour lister les billets par date
/blog_boxes/highlight_posts.html	Widget de mise en avant de billets
/blog/boxes/tag_cloud.html	Widget listant les tags associés au blog sélectionné
/blog/publication_methods/posts.html	Structure HTML associée à la méthode de publication "Publier un blog"
/blog/publication_methods/post_resume.html	Structure HTML affichant le résumé d'un billet
/blog/publication_methods/post_detail.html	Structure HTML affichant le détail d'un billet

Module de recherche

(disponible sous saytup & e-majine)

Comme son nom l'indique, ce module va vous permettre de rechercher parmi les contenus de vos sites et remonter les résultats sous forme d'une liste par ordre de pertinence.

Widget de recherche

(Classe CSS associée : widgetSearch)

Basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/search/box_search.html, ce widget est composé de deux parties, la première est le formulaire de recherche et la seconde le lien vers la recherche avancée. Le code ci-dessous intègre le formulaire dans le widget :

<form id="searchform" method="post" >
	<fieldset>
		<div class="row">
		    <label for="search_input_box">Rechercher</label>
		    <input type="text" id="search_input_box" name="q" class="wordsbox" />
		    <mx:bloc id="hidden_configuration"><input type="hidden"  /></mx:bloc id="hidden_configuration">
		</div>
	</fieldset>
	<div class="submit">
		<input type="submit" name="searchbutton"  />
	</div>
</form>

Résultats de la recherche

Les résultats de recherche, basés sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/search/content_results_search.html, se présentent dans une rubrique d'exécution, soit une rubrique (souvent masquée) définie dans l'administration, soit dans la rubrique courante si elle n'est pas précisée. Sur cette rubrique, on retrouve le formulaire de recherche :

<mx:text id="search_form" />

Il y a également un bloc gérant l'absence de résultats de la recherche :

<mx:bloc id="no_match_found">
	<div class="noMatchFound" >
		<p>Aucun document ne correspond aux termes de recherche sp&eacute;cifi&eacute;s <strong><mx:text id="words" /></strong>.<br />
		Aucune page ne contient <strong><mx:text id="words" /></strong>.</p>
		<dl>
			<dt><strong>Suggestions :</strong></dt>
			<dd>- V&eacute;rifiez l'orthographe des termes de recherche.</dd>
			<dd>- Essayez d'autres mots.</dd>
			<dd>- Utilisez des mots plus g&eacute;n&eacute;raux.</dd>
		</dl>
	</div>
</mx:bloc id="no_match_found">

Si l'on a des résultats, voici le code nécessaire à leur affichage :

<mx:bloc id="results">
	<div class="searchResults">
		<dl>
			<dt>
				<mx:text id="index" />. <a ><mx:text id="title" /></a>
				<small>[<mx:text id="popularity" />]</small>
			</dt>
			<dd>
				<mx:bloc id="content"><small><mx:text id="content" /></small></mx:bloc id="content">
				<ul>
					<li>
						<small>
							<a ><mx:text id="url" /></a>
							<mx:bloc id="content_properties">
								<mx:text id="size" /> bytes [<mx:text id="type" />] 
								<mx:text id="last_modified" />
							</mx:bloc id="content_properties">
						</small>
					</li>
				</ul>
			</dd>
		</dl>
	</div>
</mx:bloc id="results">

Dans le cas où trop de résultats sont remontés par rapport à la configuration dans l'administration, un pager apparaît, géré par le code suivant :

<mx:bloc id="searchpager">
    <,-- Défini le HTML du bouton "Aller au début" -->
	<mx:bloc id="first">&lt;&lt;</mx:bloc id="first">
	
	<,-- Défini le HTML du bouton "Précédent" -->
	<mx:bloc id="previous">&lt;</mx:bloc id="previous">
	
	<,-- Défini le HTML du bouton "Aller à la fin" -->
	<mx:bloc id="last">&gt;&gt;</mx:bloc id="last">
	
	<,-- Défini le HTML du bouton "Suivant" -->
	<mx:bloc id="next">&gt;</mx:bloc id="next">
	
	<,-- Défini le HTML du séparateur entre les liens du pager -->
	<mx:bloc id="separator">&nbsp;</mx:bloc id="separator">
	
	<,-- Mise en forme du pager -->
	<div class="pager"><mx:bloc id="items"><mx:text id="spacer" /><a ><mx:text id="item" /></a></mx:bloc id="items"></div>
</mx:bloc