Réaliser un site de publications

Documentation et tutoriels

  • e-majine
  • izi-media
  • Module de base

Réaliser un site de publications (blog, journal, ...)

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. Pour réaliser un site de publications (actualités, blog, journal, ...), vous pouvez utilisez nos solutions izi-media, e-majine ou saytup (recommandé) selon vos besoins.

 

 

Module de base

Il est fourni pour tout type de projet et vous permet de gérer plusieurs fonctionnalités telles 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, ...)
  • Gestion de médias (images, diaporama, pdf, ...)

 

Si vous utilisez nos solutions e-majine ou saytup, il est possible d'autoriser la contribution et le commentaire de publications. Pour cela, il peut s'avérer nécessaire de mettre en place une gestion de compte utilisateur sur votre site. Voici les différentes sections nécessaires :

  • Widget "Mon compte"
  • Authentification au compte utilisateur
  • Liste des actions du compte utilisateur
  • Modification du mot de passe

 

Liste des fichiers du module nécessaires

(Tous ces fichiers se trouvent dans /modeles/Langue_du_site/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
Fichiers liés à la gestion de compte
/account/login/box_login.html Widget de connexion à un compte utilisateur
/account/login/content_authentification.html Structure HTML de la page de connexion à un compte utilisateur
/account/login/content_actions_list.html Structure HTML de la page listant les actions possibles du compte utilisateur connecté
/account/login/content_change_password.html Structure HTML de la page permettant le changement de mot de passe pour le compte utilisateur connecté
/account/login/content_account_modify.html Structure HTML de la page permettant la modification des informations liées au compte utilisateur connecté

 

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)

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">

 

Dans le cas où des résultats sont obtenus, 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 id="searchpager">

 

Liste des fichiers du module

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

/search/box_search.html Widget de recherche sur le site
/search/content_result_search.html Structure HTML présentant les résultats de la recherche et le formulaire de recherche
/search/content_search.html Structure HTML du formulaire de recherche

 

Intégration de vos publications par solution

Selon la solution que vous utilisez (izi-media, saytup ou e-majine), les moyens de mettre en forme et d'intégrer vos publications régulières varient. Voyons comment procéder pour chaque solution.

 

Izi-media : publier des actualités simples

Avec izi-media, vous disposez d'une méthode de publication dédiée à l'affichage d'actualités et un widget permettant la remontée de ces dernières dans une rubrique autre que celle où la méthode de publication "Publication d'actualités" est mise en place.

 

Méthode Publication d'actualités

Izi-media vous permet de lister l'ensemble de vos actualités sur une rubrique avec cette méthode. On obtient un ensemble d'actualités présentées dans leur forme résumée à l'aide du fichier HTML /modeles/Langue_du_site/Nom_du_modele/publication_methods/news/news.html. Retrouvez ci-dessous le code correspondant à un résumé d'actualité :

<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">
				<,-- Affiche la date de création -->
				<mx:bloc id="date">
					<div class="date"><mx:text id="date" /></div>
				</mx:bloc id="date">
				<,-- Affiche la période de visibilité de l'actualité -->
				<mx:bloc id="period">
					<div class="period"><mx:text id="period" /></div>
				</mx:bloc id="period">
				<,-- Affiche la description de l'actualité -->
				<mx:bloc id="description">
					<div class="description"><mx:text id="description" /></div>
				</mx:bloc id="description">
				<,-- Affiche un lien vers le détail de l'actualité -->
				<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">

Le bloc remontant le contenu de chaque résumé d'actualité doit être à l'intérieur du bloc " mx:bloc id='news_list' ".

 

Vous avez également la possibilité de changer l'affichage du pager, en modifiant le code suivant :

<mx:bloc id="pager">
	<,-- 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 id="pager">

 

En cliquant sur le lien "En savoir plus", l'utilisateur arrive dès lors sur le détail de l'actualité, basé sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/publication_methods/news/news_detail.html. Le détail est composé en plusieurs parties, en commançant par le titre suivi de l'entête :

<,-- Titre de l'actualité -->
<h1><mx:text id="news_title" /></h1>

<,-- Entête de l'actualité -->
<div id="chapo">
	<,-- Affichage de l'image associée -->
	<mx:bloc id="picture"><div class="chapoPicture"><mx:text id="picture" /></div></mx:bloc id="picture">
	<,-- Détermine la taille du visuel à utiliser
		Valeur possible : normal ou thumbnail
		<mx:bloc id="imageSize">thumbnail</mx:bloc id="imageSize">
	-->
	
	<,-- Affichage de la date -->
	<mx:bloc id="date"><div class="date"><mx:text id="date" /></div></mx:bloc id="date">
	
	<,-- Affichage de la période d'affichage -->
	<mx:bloc id="period"><div class="periode"><mx:text id="period" /></div></mx:bloc id="period">
	
	<,-- Affichage de la description -->
	<mx:bloc id="description"><div class="description"><mx:text id="description" /></div></mx:bloc id="description">
	<hr class="clear" />
</div>

 

Suit le contenu de l'actualité :

<div id="text">
	<mx:text id="article" />
</div>

 

Si l'auteur est saisi, il est également remonté dans le ficher HTML ainsi :

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

 

L'utilisateur peut réagir à l'actualité, soit envoyer un e-mail à destination du site internet, soit envoyer l'article à une autre personne. Ci-dessous le code associé à ces actions :

<ul class="articleAction">
	<,-- Lien pour réagir à l'actualité -->
	<li class="react"><mx:reacttoarticle title="R&eacute;agir &agrave;l'article" content="R&eacute;agir" /></li>
	
	<,-- Lien pour envoyer l'URL de l'actualité à un ami -->
	<li class="send"><mx:sendarticle title="Envoyer l'article" content="Envoyer l'article" /></li>
</ul>

 

Vous pouvez également avoir des liens depuis le détail de votre actualité, soit vers la rubrique précédente, soit vers l'actualité précédente/suivante par le biais de ce code :

<div class="pager">
	<,-- Lien vers l'actualité précédente -->
	<mx:bloc id="previous">
		<a  class="PagerPrevious" >
			<span><mx:text id="previous" /></span>
		</a>
	</mx:bloc id="previous">
	
	<,-- Lien vers l'actualité suivante -->
	<mx:bloc id="next">
		<a  class="PagerNext">
			<span><mx:text id="next" /></span>
		</a>
	</mx:bloc id="next">
</div>

<,-- Lien vers la page précédente -->
<div class="back" ><mx:referer title="Revenir à la page précédente" content="Retour" /></div>

 

Widget "Derniers éléments"

(Classe CSS associée : widgetLastElements)

Ce widget vous permet de remonter les dernières actualités créées sur le site. Il dispose de deux modes d'affichage : statique et dynamique. Ces deux modes sont séparés dans le fichier HTML /modeles/Langue_du_site/Nom_du_modele/boxes/last_elements/last_elements.html, voici tout d'abord le mode statique :

<mx:bloc id="statics">
	<div class="widgetContainer">
		<mx:bloc id="news">
			<div class="news">
				<,-- Titre de l'actualité -->
				<mx:bloc id="title"> 
					<h3><a  class="widgetLastElementsTitle" >
						<span><mx:text id="content_title" /></span>
					</a></h3>
				</mx:bloc id="title">
			
				<,-- Image associée -->
				<mx:bloc id="picture"> 
					<div class="widgetLastElementsPicture">
						<mx:text id="content_picture" />
					</div>
				</mx:bloc id="picture">
		
				<,-- Description de l'actualité -->
				<mx:bloc id="description"> 
					<div class="widgetLastElementsDescription">
						<mx:text id="content_description" />
					</div>
				</mx:bloc id="description">
				
				<,-- Lien vers le détail de l'actualité -->
				<a  class="widgetLastElementsLink" >
					<span><mx:text id="view_more" /></span>
				</a>
			</div>	
		</mx:bloc id="news">
	</div>
</mx:bloc id="statics">

 

Le mode dynamique est réalisé avec le code ci-dessous :

<mx:bloc id="dynamics">
	<div class="widgetContainer">
		<,-- Pour que le déroulement dynamique fonctionne, il est recommandé de définir la même hauteur en pixel et l'overflow sur hidden, pour le div parent, et les div de chaque élément. -->
		<div  style="height:170px; overflow:hidden;">
			<noscript>
				<div>
				<mx:bloc id="noscript">
					<,-- Titre de l'actualité -->
					<mx:bloc id="title">
						<h3><a >
							<mx:text id="content_title" />
						</a></h3>
					</mx:bloc id="title">
					
					<,-- Image associée -->
					<mx:bloc id="picture"> 
						<div class="widgetLastElementsPicture">
							<mx:text id="content_picture" />
						</div>
					</mx:bloc id="picture">
					
					<,-- Description de l'actualité -->
					<mx:bloc id="description"> 
						<div class="widgetLastElementsDescription">
							<mx:text id="content_description" />
						</div>
					</mx:bloc id="description">
					
					<,-- Lien vers le détail de l'actualité -->
					<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">
						<,-- Titre de l'actualité -->
						<mx:bloc id="title">
							<h3><a >
								<mx:text id="content_title" />
							</a></h3>
						</mx:bloc id="title">
							
						<,-- Image associée -->
						<mx:bloc id="picture"> 
							<div class="widgetLastElementsPicture">
								<mx:text id="content_picture" />
							</div>
						</mx:bloc id="picture">
							
						<,-- Description de l'actualité -->
						<mx:bloc id="description"> 
							<div class="widgetLastElementsDescription">
								<mx:text id="content_description" />
							</div>
						</mx:bloc id="description">
							
						<,-- Lien vers le détail de l'actualité -->
						<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">

 

Liste des fichiers

(Tous ces fichiers se trouvent dans /modeles/Langue_du_site/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 de la méthode de publication "Publier des actualités"
/publication_methods/news/news_detail.html Structure HTML présentant le détail d'une actualité

 

Saytup : publier des actualités avec le blog et des articles en colonnes

Avec Saytup, publier vos actualités est un jeu d'enfant. Utilisez la méthode "Publier un blog" et créez vos billets/actualités le plus simplement du monde. Vous pouvez associer une catégorie et des tags à vos actualités. A disposition également, plusieurs widgets pour remonter les différents éléments créés à partir de la méthode "Publier un blog". Voyons tout cela plus en détail ,

 

Méthode de publication Publier un blog

Cette méthode de publication s'appuie sur le fichier HTML /modeles/Langue_du_site/Nom_du_modele/community/blog/publication_methods/posts.html. Elle est constituée d'une première partie remontant le nom de la rubrique et la description du blog :

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

<,-- Description de la rubrique -->
<mx:bloc id="description">
	<div class="PostDescription" ><mx:text id="description" /></div>
</mx:bloc id="description">

 

S'ensuit une partie liée à la contribution si activée. Le code suivant gère la contribution :

<,-- Bloc contenant le formulaire de contribution -->
<mx:bloc id="contribution_form">
	<mx:text id="content" />
</mx:bloc id="contribution_form">

<,-- 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">

 

Le listing des différentes actualités/billets de la méthode se fait au moyen du code suivant :

<,-- Liste des billets -->
<mx:bloc id="posts">
	<,-- Boucle d'affichage des billets -->
	<mx:bloc id="post">
		<div class="post"><mx:text id="post" /></div>
	</mx:bloc id="post">

	<,-- Pager -->
	<mx:bloc id="pager">
		<,-- 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 -->
		<mx:bloc id="separator"> </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 id="pager">
</mx:bloc id="posts">

 

A la suite, retrouvez le bloc nécessaire à l'affichage du détail d'une actualité/billet :

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

 

N'oubliez pas de prendre en compte le cas où le blog ne remonte pas de billets, auquel cas le bloc suivant est appelé :

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

 

Widget Auteurs

(Classe CSS associée : widgetBlogAuthors)

Comme l'indique sa dénomination, ce widget vous permet de remonter les différents auteurs ayant publié des billets. Le widget dispose de deux options d'affichage, soit en liste simple, soit par le biais d'un formulaire de sélection. Le code correspondant à l'affichage des auteurs sous forme de liste est le suivant :

<mx:bloc id="list_mode">
	<ul>
		<,-- Boucle affichant chaque auteur -->
		<mx:bloc id="li">
			<li>
				<,-- Lien vers les billets de l'auteur -->
				<a >
					<span><mx:text id="label" /></span>
				</a>
			</li>
		</mx:bloc id="li">
	</ul>
</mx:bloc id="list_mode">

 

L'affichage du formulaire se fait avec le code ci-dessous :

<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"  class="btn btn-primary" />
		</div>
	</form>
</mx:bloc id="select_mode">

 

Widget Calendrier

(Classe CSS associée : widgetCalendar)

Son apparence est un calendrier mensuel où vous pouvez naviguer entre les mois et les années et sélectionner un jour dès lors qu'une publication de billet(s) a lieu. Voici le détail du code :

<table class="calendar">
	<caption>
		<mx:text id="caption" />
	</caption>
	<thead>
		<tr class="calendarNav">
			<,-- Lien vers l'année précédente -->
			<th><a >&lt;</a></th>
			
			<,-- Lien vers le mois précédent -->
			<th><a >&lt;&lt;</a></th>
			
			<,-- Lien vers la date du jour -->
			<th colspan="3"><a ><mx:text id="today" /></a></th>
			
			<,-- Lien vers le mois suivant -->
			<th><a >&gt;&gt;</a></th>
			
			<,-- Lien vers l'année suivante -->
			<th><a >&gt;</a></th>
		</tr>
		<tr class="calendarDays">
			<,-- Affichage des libellé des jours de la semaine (L,M,M,J,V,S,D) -->
			<mx:bloc id="days">
				<th><mx:text id="day_label" /></th>
			</mx:bloc id="days">
		</tr>
	</thead>
	<tbody>
		<mx:bloc id="weeks">
			<tr>
				<,-- Affichage des différents numéros de jour -->
				<mx:bloc id="days_number">
					<td >
						<,-- Bloc affichant un lien si le jour contient des éléments -->
						<mx:bloc id="link"><a ><mx:text id="day" /></a></mx:bloc id="link">
						
						<,-- Bloc si le jour ne contient pas d'éléments -->
						<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 de mise en avant de billets

(Classe CSS associée : widgetHighlightPosts)

Avec ce widget, remontez un nombre défini de billet(s) en provenance d'un blog sélectionné dans l'administration avec des critères de tri (par date de publication, le plus de commentaires, les mieux notés, ...). Chaque billet remonte avec la structure suivante :

<div class="widgetHighlightPost">
	<div class="widgetHighlightPostContainer">
		<,-- Titre du billet -->
		<h3><mx:text id="libelle" /></h3>
		
		<,-- Date de publication du billet -->
		<div class="widgetHighlightPostDate"><mx:text id="date_crea" /></div>

		<,-- Auteur du billet -->
		<mx:bloc id="author">
			<div class="widgetHighlightPostAuthor"><mx:text id="author" /></div>
		</mx:bloc id="author">
		
		<,-- Description du billet -->
		<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_m