DESCRIPTION D’UNE MISSION | BTS SIO
Prénom – Nom
Nathan PARTOUCHEN° mission
1Option
SLAM SLAMSituation
Formation FormationLieu de réalisation
Campus Montsouris 2 Rue Lacaze –
75014 PARIS
Période de réalisation
Novembre 2020
Novembre 2020
Modalité de réalisation
VÉCUE
Intitulé de la mission
Titre de la missionFaire un site fictif de vêtement
Description du contexte
de la mission
Description en 2 à 3 lignes maxi
Crée une e-boutique fictif avec support, FAQ et système de paiement.
Ressources et Outils utilisés
Liste des ressources disponibles et outils utilisés (Documentations, Matériels et Logiciels)
- Sublime Text - WampServer
Résultat attendu
Résultat attendu avec la réalisation de cette missionSite permettant contenant toute les fonctionnalités d’une e- boutique basique, page d’affichage des produits, système de
paiement, service après-vente, FAQ.
Contraintes
Contraintes : techniques | budgétaires | temps | O.S. ou outils imposés… Site entièrement fait en HTML / CSS, sans PHP, ni librairie comme bootstrap.
Description simplifiée des différentes étapes de réalisation de la mission
en mettant en évidence la démarche suivie, les méthodes et les techniques utilisées
Chapitre 1 : Développement de la première partie HTML et CSS du projet Etape :
1.1/ Tout d’abord nous créons le fichier index.php, puis le fichier style.css qui
comprendra le code CSS pour améliorer la partie physique du site. Nous allons ensuite commencer la première partie du site c’est-à-dire la barre de menu. Voici le code html :
Le span class="extension" est un ajout pour que lors ce qu’on passe la souris dessus le mot
« Contact » devienne « Nous contacter » Voici le code css :
Compétences associées (Voir tableau)
Liste des intitulés du tableau de compétences (avec les références)
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
A1.4.1 Participation à un projet
Résultat :
Lors du passage de la souris sur le menu :
1.2/ Etant donné que le contenue principal de la page d’accueil est assez simple (deux boutons) le code HTML n’est vraiment pas très long :
Cependant le code CSS lui, est quand même assez long :
le h1 est la balise titre « Equinox-Clothes » qu’on embellie grâce à la propriété de style « text- shadow ». Le .button est le conteneur des deux boutons, et .btn et .btn-one, .btn-two sont les propriétés des 2 boutons. La pseudo classe « :hover » signifie lors du passe de la souris sur le bouton.
Résultat :
1.3/ Et enfin le footer, le code HTML est un peu plus développé cette fois ci :
Le conteneur footer regroupe 3 grand block, « Assistance », regroupant la page contact et la page FAQ, « Shop », pour les pages de produit, et « Nous suivre », pour les réseaux sociaux de equinox-clothes.
Le code CSS :
Le #conteneur aligne tous les blocks div en ligne. Et le .social définie la forme de tous les boutons. Les .fa-facebook, .fa-twitter… définissent la couleur de leur bouton, bleu pour Facebook, rouge pour YouTube. Pour le logo d’instagram j’ai dû utiliser un background : radial-gradient, puisque le logo n’est pas unicolore.
Résultat :
Résultat final :
Chapitre 2 : Développement de la deuxième partie HTML et CSS du projet Etape :
2.1/ Nous allons maintenant nous intéresser à la page produits c’est-à-dire les fichiers sweat.html et T-Shirt.html. Tout d’abord nous réécrivons le code pour la barre de menu et le footer, puis dans la balise « main » nous mettons un conteneur, pour contenir tous les produits :
Ce qui nous facilite beaucoup la tâche en CSS nous n’avons qu’à mettre des propriétés Flex sur l’id « liste-vêtement » :
L’id liste-vetement a donc pour propriétés un display : flex ; qui rend l’élément flex, associé à la propriété flex-direction : row ; qui aligne toute les div, qui son aligner au centre grâce à align- items, et dernier point important, chaque produits va à la ligne lorsqu’il dépasse la largeur maximum grâce à la propriété flex-wrap ;
Resultat :
2.2/ Une fois les articles affichés il faut afficher les détails du produits, le bouton de paiement ect… pour ça on a donc crée les pages sweat-1,2,3.html… :
On a, à droite le formulaire pour sélectionné la quantité, et la taille ainsi que le bouton API de PayPal. Et à Gauche une photo du produit avec sa description
