Exercice d’intégration

Cette semaine je me suis prêté à l’exercice de l’intégration.
Il s’agissait tout d’abord de représenter le blog de voyage de deux copines parcourant le monde en avion. Une sorte de road trip mais version air, alors un air trip.
Le but étant d’utiliser photoshop pour produire une maquette et de s’initier à la production d’un graphique vectoriel adaptable ou SVG in english please.

Le site disposé en one-page présente les points du parcours sur une carte du monde, ils doivent être cliquables, renvoyer vers et afficher un rapide aperçu de l’article en question.
Enfin, on retrouve une section blog comprenant un article et des commentaires.

Quelques Ressources

  • Les photos sont issues de unsplash.com
  • La gestion du SVG est confiée à la librairie javascript Raphaël.
  • Le plugin qtip2 s’est chargé de modifier les tooltip liés au SVG.

 
maquette de site

 

La librairie javascript Raphaël permet de tracer les formes vectorielles au dessus de la mappemonde vierge. Qtip assure l’affichage de la vignette, l’intérêt de son utilisation réside dans sa capacité à positionner le tooltip sur un élément SVG.

trace.scotland = paper.circle(671.5,228.5,5).attr(pink);
trace.scotland = paper.circle(671.5,228.5,2).attr(white);
trace.scotland = paper.circle(671.5,228.5,30).attr(opacity);
trace.scotland.attr({href: '#'}).hover(hoverIn, hoverOut).click(clickIn);
$(trace.scotland.node).qtip({
style: { def: false},
content: { text: '<img src="./img/scotland.jpg" />
<h2>Day 2 - Scotland</h2>
' },
position: { my: 'top left', at: 'bottom center', adjust: { y: 30,}
}
});

Et voici le résultat: shrtrip.com
 
Il serait interressant de charger les nouveaux articles du blog par requête ajax dans une version en prod.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *