Table des matières
- Auteur du site
- INFO GENERAL
- URL
- Description des pages du sites
- JSON
- Arborescence du site
- Favicon
- Polices gfont du site
- Amélioration BONUS du site
- Autoévaluation
- Crédits
Auteurs du site FLM
Pourquoi FLM ?
FLM signifie à la fois l'univers cinématographique de notre site (simplement FILM sans I), mais il a aussi une forte connotation avec le mot FLEMME qui fait un jeu de mot et s’accorde avec l'idée de notre site proposant des plats d'univers de films, séries, anime et jeux vidéo préférés. Lorsque vous n'avez pas envie de cuisiner chez vous, vous pouvez commander sur FLM !
L'objectif principal du site est de vendre des menus adaptés de films, séries, anime et jeux vidéo.
Notre motivation sur le choix du site était à la fois de créer un site esthétiquement joli et de pouvoir explorer plusieurs sujets qui nous intéressent sans que les thèmes soient trop différents (et donc confus).
URL
L'URL de notre site est la suivante : https://webetu.iutnc.univ-lorraine.fr/~e17516u/sae105-flm L'URL du README exporté est la suivante : https://webetu.iutnc.univ-lorraine.fr/~e17516u/sae105-flm/readme/export.htmlDescription des pages du site
À partir de maintenant, nous allons détailler chaque page qui a été mise en œuvre avec l'intérêt qu'elle apporte au site ainsi que leur fonctionnement, avec leurs langages associés (HTML,CSS et JS) et par quelle personne elle a été produite.
index.html
Visuelle
Cette page permet de voir la liste des thèmes de films, séries, animés et jeux vidéo que nous abordons pour réaliser nos menus. Elle utilise un système de carrousel infinis (par le biais du carrousel.js soit un swiper).Cette page a été principalement produite par DELHOMMEAU Tyddiann mais aussi par GENEIX Jules dans le visuel (Image).
Utilisation de HTML, CSS et JS (dynamisation et swiper)
Validation W3C
film.html,serie.html, anime.html et gaming.html
Visuelle
Ces pages permettent également de visualiser les thèmes que nous abordons pour la réalisation de nos menus. Elles sont chacune classées par catégorie (films, séries, animés et jeux vidéo) et utilisent toutes le même système de cards.Ces pages ont été principalement réalisées par GENEIX Jules, puis réadaptées par DELHOMMEAU Tyddiann selon les thèmes (notamment au niveau des visuels d’animés et de certaines cartes de jeux vidéo), ainsi que pour la rédaction des synopsis des quatre catégories.
Utilisation de HTML, CSS et JS (dynamisation)
Validation W3C
menu.html
Visuelle
Ces pages de menus représentent les menus des univers / thèmes dont ils sont inspirés. Elles reprennent simplement l’ID auquel ils sont associés. Ces pages ont principalement été réalisées par DELHOMMEAU Tyddiann, en utilisant le même système de carrousels infinis que sur la page d’index, réadapté pour les menus. Un descriptif de l’univers auquel les menus sont associés est également présent.
Utilisation de HTML, CSS et JS (dynamisation et swiper)
carte.html
Visuelle
Cette page permet de visualiser l’ensemble des points de vente (restaurants) qui proposent nos menus à travers le monde. Sur cette page, nous utilisons un système de carte mappable (highlight et site.js), ainsi que des pop-ups. Chaque pop-up est rattachée à un pays affiché en rouge sur la carte. Elle présente la liste des restaurants, avec leur adresse, leur ville, ainsi que le thème de menu qu’ils proposent. Cette page a été principalement réalisée par GENEIX Jules, avec l’aide de DELHOMMEAU Tyddiann pour les pop-ups et la dynamisation de la carte.
Utilisation de HTML, CSS et JS (dynamisation et carte mappable)
Validation W3C
connexion.html et inscription.html
Visuelle
Ces deux pages permettent uniquement de se connecter et de s’inscrire sur le site par le biais d’un formulaire. Les deux pages ont été produites par DELHOMMEAU Tyddiann.
Utilisation de HTML et CSS
Validation W3C
panier.html
Visuelle
Cette page est purement visuelle, mais elle représente le panier de commande de notre site après que vous avez choisi un produit dans le menu. La page a été produite par GENEIX Jules.
Utilisation de HTML et CSS
Validation W3C
contact.html
Visuelle
Cette page résume simplement les différents moyens de nous retrouver et de nous contacter, à savoir par mail, Instagram, Twitter et TikTok (à noter que les comptes existent réellement). La page a été produite par GENEIX Jules.
Utilisation de HTML et CSS
Validation W3C
apropos.html, mentionlegal.html, condutile.html et policonfi.html
Visuelle
Ces pages résument qui nous sommes, l’intérêt du projet ainsi que le cadre dans lequel il a été réalisé pour la page « À propos ». Les trois autres pages présentent uniquement les conditions d’utilisation, les mentions légales et la politique de confidentialité du site (à noter que ces trois dernières sont totalement factices, le projet restant toutefois encadré par l’IUT). Les pages ont été produites par DELHOMMEAU Tyddiann.
Utilisation de HTML et CSS
Validation W3C
navbar.css, footer.css, style.css et main.css
La totalité des pages réutilise le même CSS pour la navbar, le footer et le fichier style.css. Ils ont été réalisés par DELHOMMEAU Tyddiann et GENEIX Jules dans leur ensemble.
Navbar
Footer
Il en est de même pour le fichier main.css, mais celui-ci s’applique uniquement aux pages suivantes :
- apropos.html
- condutile.html
- mentionlegal.html
- policonfi.html
Utilisation de HTML et CSS et Validation effectuer via les pages précédentes
403.css et 404.css
Les pages ont été réalisées par DELHOMMEAU Tyddiann et elles sont représentées simplement par une image de la page erreur en question. Visuelle réalisée par GENEIX Jules.
Utilisation de HTML et CSS
Validation W3C
JSON
films.json, serie.json, anime.json et gaming.json
Tous les JSON reprennent la même structure :
- ID
- Nom
- Année de sortie
- Genre
- Auteur
- Synopsis
- Description
- Image poster (pour l'affiche de l'index)
- Image pour la carte (pour card)
- Image décorative (pour descriptif)
- Liste des menus, chacun contenant :
- Nom du menu
- Entrée
- Plat
- Dessert
- Boisson
- Prix
- Image du menu
Exemple pour anime.json
restaurant.json
Ce JSON reprend la forme suivante :
- Nom du pays
- Numéro
- Coordonnées du pays (pour le mapping)
- Continent
- Image du pays avec points de vente
- Liste des points de vente, chacun avec :
- Nom du restaurant
- Ville
- Adresse
- Thème du restaurant
Exemple de restaurant.json
Arborescence du site
Favicon
Versions Favicon
Versions plus grandes
Police gfont du site
Les polices GFONT utilisées sont :
- Le Fraunces (non vectorielle)
- Le Bebas et Neue&Family (vectorielle)
Amélioration BONUS du site
Dans le cadre de notre site, nous souhaitions apporter une utilisation fluide et propre au niveau des interactions support-utilisateur et c'est pour cela que nous avons utiliser un système de carrousel-infini qui fait appeler à une bibliothèque / système nommé swiper. Il est totalement fonctionne par le biais du JS. Cette caractéristiques a été adaptés à la fois pour les affiches de film sur l'index et aussi sur la page des menus de chaque film, séries, anime et jeux-vidéo.
Le système reste assez simple, il se compose de la façon suivante : :
- Le loop indique si le carrousel est infinis ou non
- Le slidesPreview indique le nombre d'éléments visibles
- Le pagination permet d'avoir un effet de Bulles de pagination :
- el indique l'éléments selectionner sur lequelle activer les bulles de pagination
- clickable indique si elle sont clickable
- dynamicsbullets indique si oui ou non elle se réduise ou grossis en fonction de leur positionnement et selon l'éléments auquelles elle sont reliés
- navigation représente seulement les flèches du carrousel
Auto-Évaluation
Pour ce qui est de la note qui pourrait être attribué à notre projet, et en prenant en compte toutes les contraintes et les élèments bonus apportés au projet en dehors des contraintes de réalisation du projet nous pensons que le fruit de notre travail mériterais dans sa grande globalité 19 voir 20.
Crédits
Dans le cadre cette SAE105 nous avons utiliser les ressources suivantes afin d'améliorer le visuel de notre site :
- Nous nous sommes aider de CodePen pour comprendre certains éléments comme le système de cards.
- Système de carte mappable fourni par Mr. Husson.
- Pour le système de carrousel, on à appris du tuto suivant : How to Create Responsive Card Slider in HTML CSS & JavaScript | Step-by-Step Tutorial proposer par CodingNepal.
- Nous avons parfois fait appel à TchatGPT et/ou Gemini pour comprendre certaines erreurs dans notre JS mais aussi à M.Beaudeux.
- La plupart des images de Menus, on était générer par TchatGPT ou GEMINI sinon tout le reste des medias on était créer ou trouver par nous mêmes sur Google.