Modules de Unes : nouveautés 1/3

le Jeudi 2 Février 2012 I 32 Commentaires

Modules de Unes : nouveautés 1/3
L'utilisation du framework javascript JQuery en front office nous ouvre un champ de nouvelles possibilités pour les modules de Une de votre site.

Du coup, j'ai pas mal de choses à vous présenter concernant ces modules qui sont très importants pour réussir votre home page. Je vais découper la présentation des nouveautés sur deux notes. Dans celle-ci, je vais vous parler des 4 nouveaux modules réservés à la zone de titre du site.

Jusqu'à présent, vous utilisiez les modules de Une dans la zone centrale. Avec ces 4 là, vous allez pouvoir enrichir la zone de titre. Si vous optez pour un module de Une dans cette zone, sachez qu'il ne sera pas affiché dans les pages internes mais uniquement sur la home page.

Il y a donc 4 types de présentations différents. Passons les en revue

Moderne 8, le plus visuel

J'ai choisi d'illustrer la note avec Moderne 8 (image ci-dessus)

Moderne 8 est le module le plus visuel. Il se compose d'une grande image, qui occupe toute la largeur du gabarit. Le titre et les meta informations associées à l'article (description, auteur, date, ...) s'affichent sur un carré en opacité sur l'image.

Moderne 8 permet de publier jusqu'à 5 articles à la Une. Un pager sous forme de "bullets" (petits ronds style iOS) permet de naviguer entre les différents articles. Une opacité est automatiquement appliquée sur les bullets.

Au niveau des transitions d'affichage, vous avez le choix entre 2 effets :
- Slide : effet de glissement lors d'un passage d'un article à l'autre
- Fade : effet de fondu 

Il est possibe de choisir un défilement automatique, et de régler la temporisation du défilement. 

Vous remarquerez au passage que l'interface de paramétrage du module a été améliorée. Les options sont contextuelles et apparaissent en fonction de leur activation ou non. Cela évite de surcharger l'interface inutilement, et rend plus intuitif le paramétrage.

Moderne 9, sobre et élégant

Modules de Unes : nouveautés 1/3
Moderne 9 est un type de présentation classique mais contenant des petites subtilités qui font toute la différence.

A gauche, le titre et les méta-données de l'article. A droite, sur la moitié du module, la photo associée. Une image de taille moyenne suffit donc pour habiller ce module.

Notez l'effet ombré en CSS3 sur les contours de l'image. L'ombre est positionnée à l'extérieur de la bordure.

Moderne 9 peut accueillir jusqu'à 5 articles en Une. La navigation s'effectue à partir du pager Bullets. L'effet de transition est de type Fade.

Moderne 10, des flèches en CSS3

Modules de Unes : nouveautés 1/3
Moderne 10 affiche la photo dans la partie gauche du module. La taille est moyenne et panoramique. Une ombre en CSS est appliquée à l'intérieur de la bordure de l'image. Sur la partie droite, on retrouve le titre et les meta données de l'article.

Avec Moderne 10, vous pouvez placer jusqu'à 5 articles à la Une. Comme effet de transition entre les articles, vous pouvez choisir entre Slide et Fade. Le défilement automatique est possible.

La particularité de Moderne 10 réside dans les flèches qui permettent de naviguer entre les articles. Les flèches sont à l'extérieur du gabarit. Ce ne sont pas des images, mais des flèches réalisées entièrement en CSS3. Non seulement cela permet d'accéler la vitesse d'affichage, mais surtout cela permet de les personnaliser facilement. Pour cela, vous n'avez qu'à intervenir sur la police Pager du module. Vous pourrez ainsi jouer sur leurs couleurs.

Si les possibilités de personnalisation des flèches CSS par défaut ne vous conviennent pas, vous pouvez les remplacer par des images personelles. Dans ce cas là, il vous faudra uploader dans le module 2 images. Une pour la flèche de droite et une pour la flèche de gauche. 

Moderne 11, l'héritier de la Web TV

Modules de Unes : nouveautés 1/3
Moderne 11 est directement inspiré d'un des modules de Une de la Web TV. L'image est à gauche et est assez grande. Sur la droite, en colonne, la liste des 4 articles à la Une.

Pour l'article sélectionné, on retouve son titre et ses meta informations sur un bandeau horizontal en opacité sur l'image. La couleur de l'opacité correspond à la police dominante et reste ainsi en accord avec la couleur de fond du module. La couleur de l'article sélectionné correspond à la couleur de background de la police titre. 

L'effet Fade est utilisé pour la transition entre les articles. Le défilement automatique est possible et vous pouvez également régler la césure sur la description des articles au niveau des 4 positions, de façon à travailler finement vos slogans ou vos accroches.

A suivre ...

Nous venons de voir les nouveautés réservées à la zone de titre des CMS.

Dans des prochaines notes, je vous présenterai d'autres nouveautés concernant les modules de Une du CMS et de la Web TV.


Jerome Granados
Jérôme s'occupe de la promotion de WMaker. Il accompagne les prospects dans la découverte de la... En savoir plus sur cet auteur


Vos commentaires
Du plus récent au plus ancien | Du plus ancien au plus récent

12.Posté par philippe le 02/02/2012 17:18 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Génial, Moderne 9 me convient parfaitement, en revanche, pour Moderne 8, que j'ai testé, la superposition du texte su l'image est pas top, peut être est ce ma faute, j'ai pas tout réglé. De toute façon, mes images étaient un peu petites et ne prenaient pas toutes la place.

Bravo à l'équipe, j'attends les autres nouveautés avec impatience :)

11.Posté par La Boite A Truc le 02/02/2012 17:15 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
@9 jerome Granados
Ahah, et non pas vu cette feinte....
et vidé les caches comme un maniaque...
OK on teste

Cool le 7 quand même ;)

10.Posté par Blain Kiné Formations le 02/02/2012 16:15 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Même cache vidé sur FF module blanc :-(

9.Posté par Jerome Granados le 02/02/2012 16:06 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Chrome possède un cache capricieux, assez pénible à vider, ne vous découragez pas :)

@7.La boite A truc :
A la différence de Moderne 7 dont je parlerai plus tard et qui s'utilise en zone centrale, M8 à M11 s'utilisent en zone de titre. Avez-vous bien tenté de les utiliser dans cette zone du gabarit ?

8.Posté par Next 51 le 02/02/2012 15:44 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
@floriant

Ah moi aussi sur Chrome, et sur Firefox c'est maintenant OK >>> Merci pour l'info

7.Posté par La Boite A Truc le 02/02/2012 15:42 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Bravo
Encore une fois, ça fait presque une fois par jour en ce moment.... :)
J'ai déjà testé et installé la moderne 7 mais est-ce vraiment une news ?
L'affichage Fade = vraiment bien !
mais pour l'instant, 8-9-10-11 pas accessible...
Pressé comme d'hab, peut-être même trop....

6.Posté par Florian le 02/02/2012 15:40 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Une info, j'avais également vidé mon cache, cela n'avait rien changé, cependant, je suis passé sous Forefox (jétais sous chrome) et sous Firefox, ça fonctionne !

5.Posté par Next 51 le 02/02/2012 15:38 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
@jerome
C'est ce que j'ai fais, mais non rien. Le module s'ouvre, mais les modèles sont invisibles.

Idem sur mon module A la Une déjà installé sur la zone centrale

4.Posté par Jerome Granados le 02/02/2012 15:32 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
@ 2.Blain & @ 3.Next 51 :
Pensez à vider les caches

3.Posté par Next 51 le 02/02/2012 15:02 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Superbe, enfin une UNE à la hauteur et à la ''page''

Snif... Le module est bien présent, mais impossible de sélectionner un modèle, voir le screen


2.Posté par Blain Kiné Formations le 02/02/2012 15:00 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Super. Merci beaucoup pour cette évolution que j'attendais avec impatience.
Bien que le module ne semble pas encore actif.

1.Posté par Florian le 02/02/2012 14:56 | Alerter
Utilisez le formulaire ci-dessous pour envoyer une alerte au responsable du site concernant ce commentaire :
Annuler
Je voulais être le premier à vous féliciter pour cette grande avancée dans la conception front office de nos sites, donc ... FELICITATIONS !!! :)

Cdt,
Florian

1 2
Nouveau commentaire :
Facebook Twitter



Derniers tweets
WMaker Blog | Feedback sur l'interruption de service de jeudi 28/11 Les services de GoodBarber et de WMaker ont été… https://t.co/Otebet2RVc
Vendredi 29 Novembre - 16:55
WMaker Blog | Pourquoi est-ce que seul un lien apparaît lorsque je partage un article de presse sur Facebook ? On a… https://t.co/DbyOGns1Zy
Mercredi 6 Novembre - 16:33
WMaker Blog | Redirection SSL Il y a bientôt 2 ans nous vous proposions gratuitement des noms de domaine en httpS.… https://t.co/TLgQ0FyHiP
Vendredi 11 Octobre - 11:02
WMaker Blog | Publication de presse européenne Si vous avez la joie d'avoir été sélectionné par Google comme public… https://t.co/IR4pSGsape
Jeudi 10 Octobre - 14:07