Web Design : Planète Paix TV, A Unix Mind In A Windows World

Ce n’est pas le projet qui m’a posé le plus de défis cette année, mais il occupe une place particulière dans mon portfolio car c’est le premier site web que je réalise qui utilise l’API de CinetPay ( un moyen de recueillir des paiements en ligne).

Planete Paix TV – http://planetepaixtv.com est une webtv et webradio conçue pour l’organisation Planète Paix http://planetepaix.org.

Objectifs

Ce site permettra l’ONG Planète Paix de centraliser sa production de médias en ligne sur une plateforme.

Pour ce faire, les vidéos sont hébergées sur le compte YouTube de l’ONG et les émissions hébergées sur le serveur et diffusées par le biais de PowerPress.

Le site web est propulsé par le CMS WordPress.

La maquette

Logiciel utilisé: Affinity Designer

Temps : 2 heures.

Web Design : Planète Paix TV, A Unix Mind In A Windows World

Bien qu’ayant l’habitude de travailler sur Sketch pour concevoir des maquettes, j’ai décidé d’essayer, une fois en passant, Affinity Designer pour concevoir une interface de site web.

J’avais surtout envie de rentabiliser mon achat de ce logiciel ainsi que le pack Grade Ui fourni en tant que bonus .

La conception de la maquette sur Affinity Designer m’a pris 2 heures . Il faut dire que  le fait d’avoir des composants graphiques déjà prêts pour les boutons et certains sections m’a aidé à aller vite sur le sujet .

Code

Logiciels utilisés: Adobe XD, Zeplin, Sublime Text 

Temps : 6 heures.

Web Design : Planète Paix TV, A Unix Mind In A Windows World

Ce template a été développé en une soirée – de 19 heures à 1 heure du matin, en utilisant mon starter kit Html5xMaterialize.

La conversion d’Affinity Designer au Html a été rendue possible grâce à Adobe XD. Dans un premier temps, la maquette conçue sous Affinity Designer a été exportée en tant que .psd (avec l’option preserve readibility activée). Une fois le fichier ouvert dans Adobe XD, ce dernier a ensuite été exporté vers Zeplin, en suivant la démarche expliquée ici.

Intégration de l’API de CinetPay

Temps : 2 heures

Sur ce point particulier, j’étais parti sur la base d’une intégration via WooCommerce. Il s’est finalement avéré que passer par un simple formulaire PHP ferait l’affaire. L’article suivant présente les détails de l’intégration de CinetPay .

Formation à l’utilisation de WordPress et ShotCut

Une fois le site web livré, les membres de l’ONG Planète Paix ont été formés à l’utilisation de WordPress , mais également à l’utilisation du logiciel de montage gratuit Shotcut et à celle de Youtube.

Jean Luc Houédanou