Morphix Webjam

Projet scolaire | Intégration et programmation web

Tester le site

Un résumé

Ce site a été créé dans le cadre du Webjam. Nous avons développé un site pour une entreprise de transports futuristes. Dans ce projet, j'ai eu pour mission de réaliser l'intégration et la programmation web afin d'obtenir un site bien intégré et dynamique.

Informations

Créateur du projet

Rito José Blandon Pinzon

Logiciels utilisés

Vs code, Figma

Compétences utilisés

Design et intégration web

Démo du projet

Création de la maquette

La maquette a été créée lors de la première journée du Webjam. Nous nous sommes inspirés du design simple et épuré de divers sites web de vente de voitures, comme Kia et d'autres. Nous avons fait de même pour les différentes couleurs, typographies et sections du site, qui sont inspirées de ces sites.

De maquette à intégration

Pour l'intégration, mon stack Tim Tools était déjà présent sur le projet. Ensuite, pour le début de l'intégration, j'ai directement intégré le header et le footer en HTML et CSS, car ils seront réutilisés sur chaque page du site. J'ai ensuite commencé à travailler sur le HTML des différentes pages que j'allais utiliser lors de la conversion du site en PHP. J'ai donc créé des structures HTML solides pour la majorité des pages, que j'ai ensuite rendues dynamiques grâce au PHP.

image-integration
image-integration
image-integration
image-integration
Image en grand

Exemple de code

image-code

Structure ACF

image-code

Structure ACF(suite)

image-code

Front-page PHP

image-code

Header PHP

image-code

Template-transports PHP

image-code

Single-transport PHP

Image en grand

Ce que j'ai fait

Intégration html et css du header et footer
Le header et le footer ont été intégrés par mes soins. J'ai utilisé des composantes de header et de footer que j'avais produites dans le passé et je les ai modifiées pour les adapter au contexte de la nouvelle maquette.
Intégration html des pages dynamiques
J'ai moi-même intégré le HTML des différentes pages que j'allais utiliser comme gabarit PHP, afin de pouvoir commencer directement le PHP sans devoir attendre l'intégration CSS des différentes sections du site.
Création des cpts et acfs
Dans le projet, je suis celui qui a créé tous les ACF et CPT, sauf la section blog. Je me suis donc servi d'un plan d'analyse que j'ai élaboré au début du projet. J'ai ensuite intégré ceux-ci en PHP dans les différents gabarits créés plus tôt.
Correction de bug css et html
Bien que j'aie déjà créé le HTML des différentes pages que j'allais intégrer, des erreurs sont survenues et mes coéquipiers ont malheureusement modifié le HTML et les différentes classes CSS, ce qui a rendu l'intégration en PHP plus difficile, car je devais ajuster ma structure HTML dans les gabarits PHP.
Correction de bug css et html(suite)
J'ai également aidé mes coéquipiers lorsqu'ils étaient en difficulté durant l'intégration en CSS de différentes sections du projet, comme par exemple les headers, les cartes et les images.