Parce que c’est dans l’air du temps, on trouve de plus en plus de sites web ayant un design qui intègre parfaitement des sliders. Souvent sur la page d’accueil d’un site, le slider permet de mettre en avant beaucoup d’informations (sous forme de texte ou bien souvent d’images) sans pour autant surcharger la page.

Il peuvent être fait avec du JQuery (voir l’article parlant d’EasySlider), Mootools voire même en flash pour le dernier de cette sélection. Toute l’astuce réside dans le fait de bien l’intégrer dans la page sans qu’il soit différent du style de la page. Le placement et l’intégration des éléments de navigation du slider sont souvent primordiaux, même si on ne les voit pas au premier abord, l’utilisateur saura où les trouver.

J’ai fait pour vous une petite sélection de design intégrant ces sliders :

http://www.etondigital.com/

http://graphik.fi/

http://www.sketchen.com/

http://www.slidedeck.com/

http://www.utah.travel/utah-maps/

Sur le même sujet :

1. Les web designs de la semaine

Le blog est  (enfin ! ) de retour! Je reprends le blog en douceur et après un petit break qui s’imposait. Les articles viendront maintenant sur un rythme un peu plus tranquille (et non, il n’y aura plus 2-3 billets par jour…).

Pour ce retour, j’ai le plaisir d’annoncer la mise en ligne de mon portfolio / CV.  Non pas que je cherche du boulot (au contraire, j’en ai trop en ce moment !), mais c’était juste pour m’amuser, faire du web design, de l’HTML / CSS et enfin du JQuery. Je me suis bien éclaté avec JQuery, et au final il y autant de lignes de code avec JQuery que de CSS !

Le design est basé sur le concept des sites horizontaux (voir des exemples dansun précédent billet). On retrouve donc des liens de navigation ( < et >) tout le long du défilement. On peut également naviguer en utilisant les flèches gauche et droite du clavier.

Enfin, il existe une version anglaise du site pour commencer la conquête du monde !

Pas encore de billet sur le même sujet !

Disponible depuis quelques temps sur le blog de Marcofolio, un tutorial pour créer une galerie photo de type mûr de Polaroïd. Plusieurs fonctionnalités sont disponibles comme le drag’n'drop des photos, les légendes écrites directement sur les Polaroïds ainsi que la rotation des photos. Il est à noter que le tutorial utilise (en plus de JQuery) le CSS 3 (donc ça marche pas sous IE6 !).

Le rendu de la galerie est vraiment nickel. Les photos bougent bien (en drag’n'drop) et l’animation est fluide. A noter que le plugin JQuery UI est également nécessaire (pour le déplacement des images). Enfin les images « rotationnent » à chaque déplacement ou au clic.

Une fois de plus, une application de JQuery qui a un rendu équivalent à une animation Flash !

Demo

Pas encore de billet sur le même sujet !

Le site Galan Design est le portfolio en ligne d’un « Art Director » qui travaille en freelance. Le site de Ramiro Galan est très coloré malgré un fond noir. Le fond du conteneur avec un effet « dessiné à la main » est bien rendu (tout en sachant qu’un switcher de fond est dispo). Le léger travail sur les transparences donne un effet assez classe au site.

La page d’accueil propose un « slider » permettant de faire scroller horizontalement ses différentes réalisations. Une légère animation au survol des grandes illustrations permet de voir apparaître le détail et les explications concernant cette réalisation. Ces animations sont bien sûr réalisée en utilisant le framework JavaScript JQuery !

Pas encore de billet sur le même sujet !

Je suis tombé sur son site hier en lisant un article sur des formulaires de contact originaux… Le portfolio de Guillaume Pacheco est, je dois l’avouer, assez original. Tout d’abord ça commence avec l’animation flash fait avec des photos des lui-même.

Ensuite, tout le site est contenu sur une seul page. La navigation est faite en JQuery, et est à base d’ancre et d’effet de scroll jusqu’au contenu voulu (grâce au plugin JQuery ScrollTo). Niveau design, chaque rubrique débouche sur une ambiance, un style différent. On y retrouve, entre autres, un bel effet de pelouse ou de plage (pour le formulaire de contact).

Pas encore de billet sur le même sujet !

Le portfolio de Charlie Gentle, un web designer anglais, est bien réalisé. Tout d’abord avec le design sobre et minimaliste. Les dessins des appareils électroniques tout en contour sont bien rendus également.

Ce qui m’a également marqué c’est l’utilisation de JQuery. En effet le contenu du site slide horizontalement quand on clique sur les flèches gauche et droite. Mais en plus du contenu, il y également une partie du fond qui bouge. Le mouvement me rappelle les effets de Parallax. Le mouvement de l’ensemble est fluide (chez moi) et donne une impression de légéreté !

Pas encore de billet sur le même sujet !

Le plugin JQuery Lazy Load permet d’optimiser le temps de chargement d’une page qui contient beaucoup d’images. En effet, lorsqu’il est activé, seules les images visibles au chargement de la page sont chargées. Ce n’est qu’en scrollant dans la page que les images suivantes seront chargées. C’est l’inverse d’un preloader (qui charge toutes les images avant d’afficher le contenu).
Voir la démo
Grâce à cela, le contenu visible de la page est prêt beaucoup plus rapidement. Le plugin JQuery accepte plusieurs options comme l’effet d’apparition des images lorsque l’on srcolle, l’image qui s’affiche pendant que la photo voulue se charge, à partir de quand on peut charger l’image (au premier pixel visible ou si 200 pixels de haut sont affichés)…

Un bon plugin en somme, même si apparemment il ne fonctionne pas bien avec JQuery 1.3.x. Il nécessite donc l’utilisation de la version 1.2.x du framework JavaScript.

Pas encore de billet sur le même sujet !

J’ai eu moins de temps pour bloguer ces tous derniers jours, et pour cause : la mise en ligne de la nouvelle version d’ Agenda Culturel a été réalisée hier. Agenda Culturel, c’est 100 portails départementaux pour trouver des événements culturels près de chez toi ! La base de données se veut très complète (plus de 100 000 au total ) avec un mélange de gros événements et d’événements locaux. A noter que le site est d’un des sites édités par Awelty (tu peux d’ailleurs trouver des articles que j’ai rédigé sur le blog d’Awelty).

J’ai participé à cette nouvelle version en tant que développeur, Pascal et Arnaud ont réalisé la partie graphique et Adeline et Thomas, l’équipe d’Agenda Culturel, ont rédigé les contenus.

Le tout a été développé en PHP/MySQL. J’ai bien entendu utilisé JQuery comme framework JavaScript, et tu peux retrouver certains plugins décrit sur ce blog : Scrollable, JQuery Delay, JQuery UI… J’ai également utilisé les API de Youtube et Flickr.

Le site est encore pour l’instant en version Beta, d’autres fonctionnalités devrait voir le jour d’ici peu !
Tchuss !

Pas encore de billet sur le même sujet !

FireQuery est un plugin Firefox qui ajoute la gestion de JQuery sur Firebug. Il faut donc avoir le plugin Firebug (un des meilleures plugins pour tout développeur !) installé pour pouvoir l’utiliser.

FireQuery permet, entre autre, d’afficher intelligemment le JQuery attaché à un objet du DOM lorsque l’on parcourt celui-ci à l’aide de Firebug, le surlignement d’élément (dans la fenêtre de Firebug) pendant l’exécution du JQuery ou d’ajouter du JQuery (juste à l’affichage) sur n’importe quelle page web (à la manière de la modification du DOM par Firebug)…

En conclusion, FireQuery rend Firebug encore plus indispensable aux développeurs !

Pas encore de billet sur le même sujet !

Avec le passage de JQuery à la version 1.3 (actuellement 1.3.2), est apparu un nouvel événement : live.

Live permet d’ajouter des listeners (‘écouteurs’ d’événements) sur des éléments du DOM générés en JQuery. Avant la création de cet événement, il fallait redéfinir, pour chaque élément du DOM, les écouteurs d’événement. Cet événement est surtout pratique pour l’utilisation d’AJAX, pour ajouter des controlleurs sur du code retourné par l’appel AJAX.

Voici un exemple (celui donné par la documentation officielle) :

1
2
3

$("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

Ici, à chaque clic sur un paragraphe, un nouveau paragraphe est créé. Grâce à l’événement live, on peut également cliquer sur les paragraphes générés par JQuery. On remarque aussi que l’appel à l’événement live requiert deux paramètres : le premier correspond au nom de l’événement que l’on veut assigner à live (ici on ajoute l’événement « click » aux paragraphes)  et en second le code qui doit être exécuté à l’événement.

Pas encore de billet sur le même sujet !

Pour l’inspiration, je partage avec toi le site Alexarts.ru qui est le site d’un web designer / illustrateur moscovite. Je trouve le design de son site particulièrement réussi. L’image de fond en plein écran, l’effet tilt-shift de la photo, les bulles, tout est bien trouvé.

Les quelques animations JavaScript ont été réalisé avec le framework Scriptaculous ainsi qu’un peu de JQuery avec l’utilisation de la lightbox Fancybox.

Pas encore de billet sur le même sujet !

Le site Worldofmerix est un site entièrement fait et animé avec du JQuery. Le parcours sur la carte du monde, les déplacement des la carte, tout fait penser à du flash… Et ben non, pas besoin de flash pour animer un site, pas besoin de flash pour pour augmenter l’interactivité d’un site.

De plus le site est loin d’être moche, j’aime assez le design de la carte et le footer qui casse l’aspect droit des sites internet habituels. Bon je te laisse sur ce site à voir absolument.

Pas encore de billet sur le même sujet !

Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.

Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).

Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur !

Pas encore de billet sur le même sujet !

Il existe plusieurs plugins JQuery pour faire des menus déroulants multi-niveaux. Après avoir présenté et fait un tutorial sur le plugin JQuery Droppy, j’ai découvert un plugin qui peut être une bonne alternative à Droppy : « jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles » (le plugin n’a pas vraiment de nom…).

Le plugin JQuery propose des simples menus déroulants sur une infinité de niveaux (il suffit pour cela de concaténer les listes non-ordonnées <ul>) mais également ce qu’il appelle des menus « iPod Drilldown ».

Pour essayer de le décrire, c’est également des menus déroulants multi-niveaux, mais l’affiche se fait uniquement dans un sous-menu et on navigue dans ce sous-menu. Pour être plus clair, je t’invite à voir la démo de ce type de menu déroulant. En terme d’ergonomie, je préfère ce type de menu, c’est bien plus simple à naviguer dedans qu’un simple menu déroulant.

L’affichage est bien entendu personnalisable en CSS, en se référant aux différentes class des blocs générés par le plugin JQuery.

Pas encore de billet sur le même sujet !

Avec la démocratisation des frameworks JavaScript (JQuery et Mootools notamment), des designs à défilement horizontal (horizontal scrolling) ont vu le jour. Voici 3 exemples de ces designs, le premier utilise JQuery, le second utilise Mootools et le 3ème un plugin JavaScript : Tiny Horizontal Scrolling.

Zupadupa.ro
Le site d’une web agency roumaine. J’ai trouvé le choix du chemin (vert ou blanc) original.

Lucuma.com.ar
C’est un site qui, si j’ai bien tout compris, présent des productions audiovisuelles.

VanityClaire.com
Le portfolio d’une web designer, illustratrice américaine.

Pas encore de billet sur le même sujet !

Pour le retour des tutoriels JQuery pour l’utilisation de plugins, je propose aujourd’hui de coupler 2 plugins (JCarousel et Lytebox) pour faire une petite galerie photo.

Lytebox n’est pas à proprement parler un plugin JQuery, il est totalement indépendant du framework. Il permet d’afficher les photos en grand format à l’écran, devant le contenu du reste du site.

Voir la démo de Tutorial JQuery : galerie photo avec JCarousel et Lightbox

Après avoir télécharger les 2 plugins, il faut les importer dans la page HTML où tu souhaites créer ta galerie photo :

1
2
3
4
5
6

<link href="css/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="css/lytebox.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/lytebox.js"></script>

Le deux premières lignes permettent d’importer les 2 feuilles de style des plugins, chacune étant nécessaire au bon fonctionnement des plugins. On pourrait les fusionner dans un seul fichier pour optimiser le temps de chargement de la page, mais dans un soucis de clarté je les ai laisser séparé. Les lignes 4 à 6 permettent d’importer tout d’abord JQuery, le plugins JQuery JCarousel et enfin Lytebox.

Il faut ensuite préparer le code HTML pour permettre l’affichage du caroussel de photos (en miniature). Pour que le plugin JCarousel fonctionne, il faut créer une liste non-ordonnée (>ul<) avec pour chaque élément (&ht;li<) une image. Enfin pour permettre l’agrandissement des photos avec Lytebox, j’ai crée un lien sur les miniatures pointant vers l’adresse de la grande photo correspondante. Il faut aussi ajouter l’attribut « rel » (avec la valeur « lyteshow » pour lance un diaporama) sur les liens pour que le lien fonctionne avec la Lytebox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul class="jcarousel-skin-tango"> <!-- la classe correspond au skin choisi pour le plugin JCarousel -->	
 
	<li><!-- on créé un élément de la liste -->
                <a href="images/1-2.jpg" rel="lyteshow" title=""><!-- lien pointant vers la photo en gran format, ajouter une valeur à l'attribut title pour afficher une légende -->
                     <img src="images/1.jpg" alt="" /><!-- on affiche la miniature -->
                </a><!-- on ferme le lien ;) -->
        </li><!-- on ferme l'élément de liste pour en ouvrir d'autres après -->		
	<li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li>								
	<li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li>								
	<li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li>								
	<li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li>								
	<li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li>								
	<li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li>								
	<li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li>								
	<li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li>								
	<li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li>									
	<li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li>							
	<li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li>				
	<li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li>
 
</ul>

On peut bien sûr personnaliser l’affichage en modifiant les fichiers CSS des deux plugins. Il est bien entendu nécessaire de modifier le CSS du plugin JCarousel si tu as des miniatures qui ont un autre format, mais le plugin fonctionne mieux avec des images carrées (ou juste l’élément du liste avec un « overflow:hidden »). Pour comprendre les modifications, je te conseille de partir des exemples donnés avec le plugin JQuery JCarousel ou partir de mon exemple disponible en téléchargement ici.

Pas encore de billet sur le même sujet !

Le site KevAdamson.com est le site d’un web designer anglais travaillant en freelance. J’ai particulièrement aimé le design de son portfolio en ligne. Les effets papier et site web faits « à la main » sont bien rendus. J’aime aussi beaucoup le GIF animé (pour une fois pas du tout kitsch) en haut à droite du blog, j’ai même cru à une animation flash.

Le site utilise également JQuery, tout d’abord avec des JCarousel pour les miniatures sur la page d’accueil (il faut tester les petites flèches en dessous). L’utilisation du plugin est assez originale avec les 4 caroussels les uns à côté des autres et avec l’effet papier déchiré en haut. On retrouve ensuite des petites touches de JQuery dans la colonne de droite avec divers blocs affichés sous forme d’onglet.

Pas encore de billet sur le même sujet !

Série de tutoriels sur JQuery que je continue ici. L’idée est de commencer de zéro (les premiers tutoriels ne sont donc pas adaptés aux connaisseurs de JQuery). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !

J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !

Retrouve le premier tutorial : installation et Hello World !

——————-

Pour le deuxième tutorial de la série « découvrez JQuery », je vais parler des sélecteurs disponibles dans JQuery. En effet pour faire des animations de la mort qui tue, il faut pouvoir sélectionner et pointer les bons éléments.

Et c’est déjà que l’on peut voir la puissance de JQuery, plein de type de sélecteurs différents existent. Comme tu as pu le voir avec le premier tutorial JQuery, les sélecteurs ressemble au premier abord à des sélecteurs CSS.

Par exemple, pour sélectionner un lien possédant un id (et pour détecter le click sur ce lien) il suffit de faire :

1
2
3

$("#idDuLien").click(function() {
       // code à exécuter au click sur le lien ayant pour id "idDuLien" ( <a href="url-du-lien.html" id="idDuLien">Lien</a> )
});

Ensuite avec du contenu dynamique (généré, par exemple, en PHP) on n’a pas forcément des id partout. Les sélecteurs marchent également avec les classes (il suffit de remplacer le # par un .). Pour les exemples qui suivent, on va se mettre dans le cas d’une liste d’éléments ayant tous la même classe.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="bloc">
     Honoratis nullum adhibens modum nec licentia licentia disseminata adhibens modum iam vexabat iam honoratis vexabat.
</div>
 
<div class="bloc">
     Nosmet amicitia amicum erga amicis termini se De termini tanti sunt fiat erga quanti amicis ipse in se ut pariter.
</div>
 
<div class="bloc">
     Suspicionum blanditiae simulantium ubi suspicionum exclamabant salute asperitati amplitudo eius vocibus dicebatur vel proximorum amplitudo imperii statum 
     proximorum statum asperitati si statum exclamabant cruentae ubi laesa enim et dolere laesa.
</div>

Pour le premier cas, on ne veut sélectionner que le premier élément, pour cela pas besoin de se prendre la tête, il suffit de faire son sélecteur sur la classe comme d’habitude et ajouter « :first », comme ceci :

1
2
3

$("div.bloc:first").mouseover(function() {
       // code à exécuter au survol du premier bloc ayant pour class "bloc"
});

Il existe plusieurs sélecteurs de ce type, voici quelques exemples :

• :first – pour sélectionner le premier élément.
• :last – pour sélectionner le dernier élément.
• :nth-child(5) : pour sélection le 5ème élément (bien entendu tu peux mettre le nombre que tu souhaites !).
  
• :even – pour sélectionner les éléments pairs à partir de zéro. C’est-à-dire le 0ème, le 2ème, le 4ème… Idéal pour coloriser une ligne sur deux d’un tableau.
• : odd – pour sélectionner les éléments impairs.
• :visible – pour sélectionner les éléments visibles qui ne sont pas en « display:none », en « opacity:0″ ou en « visibility:hidden ».
• :hidden – pour sélectionner les éléments non-visibles.
• :contains(texte) – pour sélectionner les éléments qui contiennent le texte passé en paramètre (attention cette fonction peut être gourmande en ressource).
• :checked – pour sélectionner seulement les élément coché (pour les checkbox)

Déjà avec ces différents sélecteurs, il y a de quoi s’amuser ! Après on peut également préciser le sélecteur en fonction de la valeur d’un attribut. Cela peut être utile pour sélectionner un input en fonction de son attribut « name » :

1
2
3

$("input[name=prenom]").mouseover(function() {
       // code à exécuter au survol du champ de texte ayant l'attribut name égal à "prenom"
});

On peut  utiliser des jokers pour le test :

• [name^=val] : la valeur de l’attribut name doit commencer par « val ». Par exemple : « valeur ».
• [name$=val] : la valeur de l’attribut name doit finir par « val ». Par exemple : « laval ».
• [name*=val] : la valeur de l’attribut name doit contenir « val ». Par exemple : « avaliser ».

Il existe d’autres façons encore de préciser les sélecteurs avec JQuery. Mais il y a déjà de quoi faire avec ce qu’on vient de voir. Pour plus de détails sur les sélecteurs, je t’invite à aller faire un tour sur la documentation JQuery sur les sélecteurs (en français). Ramassage des copies dans 5 minutes

Pour le prochain tutorial de la série (qui devrait être en fin de semaine ou en début de semaine prochaine), je développerai les différents événements qui existent et on pourra par la suite commencer à faire nos premières animations avec JQuery !

Pas encore de billet sur le même sujet !

Voici deux plugins JQuery sympas pour proposer des galerie en plein écran. Pas du vrai plein écran, mais la galerie utilise toute la place disponible pour le site (les barres d’outils restent affichées).

Le premier est FS Gallery qui permet l’affichage de photos Flickr, ce qui peut être une bonne variante des diaporamas que propose directement Flickr. De plus je trouve que le petit effet ajouté sur les photos est interressant.

Le second est SuperSized. Le même principe que le premier, les miniatures  ne sont pas affichées directement sur la photo. Les transitions sont également les même : des fondus enchainés. On peut afficher en plus le titre de la photo !

Pas encore de billet sur le même sujet !

Pour le 100ème billet de ce blog (en 111 jours, la moyenne est pas mal, nan ? ), j’ai choisi de présenter quelques blogs que je suis pour certains depuis plusieurs mois et pour d’autres depuis quelques jours seulement.

5 blogs sur les 6 que je vais présenter sont des blogs techniques (dans le domaine du web of course) et un plutôt humoristique. J’ai essayé de ne pas sélectionner des blogs que tout le monde connaît, on ne retrouvera pas ici Presse-Citron, Korben, Blogmotion ou BienBienBien (oups, je les ai quand même cité… ).

Galanterie oblige, je vais commencer par le blog d’Émilie Navarro qui est une webmaster dans la région toulousaine. Son blog traite de ses différentes réalisations, de ses expériences (avec Twitter par exemple), de marketing et du web en général. Ses billets sont toujours bien documentés et ses illustrations sont toujours sympas !

Olybop est un blog qui parle surtout de deisgn et qui présente très régulièrement des illustrateurs. Ses découvertes sont souvent sympas et parfois surprenante. Tu pourras également le retrouver sur twitter.

Le Dator Blog est un blog qui parle de développement web principalement. On y retrouve pas mal de JQuery et régulièrement des présentations de plugins JQuery.

J’ai découvert le blog d’Adrian Gaudebert il y a peu. Son profil de jeune développeur web m’a rappelé un peu le mien. Ses billets parle du web en général et de ses projets. C’est lui qui a créé le prjet « blog libre de tout contrôle gouvernemental » en opposition à Hadopi et Loppsi2. Il a également fait un billet sympa sur PHP fonctions !

Raphaël Kueny est un développeur web PHP. Son blog parle donc de… développement web PHP ! Ses billets sur la communauté PHP, sur les news du PHP ou sa série de tutoriels sur « Comment créer un jeu web » sont toujours intéressants et bien documentés.

Pour finir en beauté, un blog pas technique, mais plutôt humouristique : La bande pas dessinée ! Un blog BD qui présente régulièrement des planches (souvent à trois cases) où le pas concept c’est d’avoir des pas personnages. On retrouve uniquement les bulles. Si tu as un peu de temps cet été sur la plage, je ne peux que te recommander de les lire tous depuis le début. Attention, il faut aimer le second degrès et l’humour noir !

Pas encore de billet sur le même sujet !