SAE 105 PRODUIRE UN SITE

WEB

Bayle Enzo

BUT Métiers du multimédia et de d'Internet

Année 2021 - 2022

I. INTRODUCTION..................................................................................................................................... 2
II. ANALYSE TECHNIQUE............................................................................................................................ 2
I.1. ANALYSE GRAPHIQUE DU FUTUR SITE WEB CONDUISANT À UN MOCKUP.......................................................................2
I.2. UTILISATION EFFICACE DES PROPRIÉTÉS CSS POUR UNE INTÉGRATION WEB MINIMALISTE ET OPTIMISÉ À PARTIR DU MOCKUP.3
I.3. MISE EN ŒUVRE D'UN BALISAGE BASÉ SUR DU HTML 5...........................................................................................3
I.4. MISE EN ŒUVRE D'UN FORMULAIRE DE CONTACTE..................................................................................................3
I.5. PRÉSENCE D'UNE ANIMATION BASÉE CSS..............................................................................................................3
I.6. ORGANISATION EN SINGLE PAGE..........................................................................................................................4
I.7. RESPECT DES NORMES W3C...............................................................................................................................4
I.8. PRÉSENCE D'ÉLÉMENTS MULTIMÉDIA....................................................................................................................4
I.9. DÉPLOIEMENT LOCAL.........................................................................................................................................4
III. SOLUTIONS PROPOSÉ............................................................................................................................ 5
I.10. ANALYSE GRAPHIQUE DU FUTURE SITE WEB CONDUISANT À UN MOCKUP...................................................................5

1
 I. Introduction

La SAE 105 a pour nom "produire un site web" son but est de réaliser un site web avec la
problématique suivante :

"Le sujet de cette SAÉ s’appuie sur la démarche Portfolio et les étudiants sont invités à développer
leur propre site Internet. La mise en avant des compétences acquises durant les autres SAÉ est ainsi
mise en valeur au travers de ce projet combinant les compétences nécessaires à l’élaboration d’un
site Internet statique à celles devant permettre de structurer l’approche Portfolio." Pour répondre à
cette problématique, j'ai d'abord décidé de faire une analyse graphique pour savoir quelle couleur
aller avoir le site et quelle typographie il y aller avoir. Pour pouvoir ensuite faire un mockup du futur
site.

II. Analyse technique

Pour faire cette SAE, nous avions plusieurs critères à respecter. Nous devions produire un site web
statique avec un balisage basé sur du html 5 et des propriétés CSS efficace. Nous devions aussi
utiliser une solution d'hébergement.
Dans cette partie, je vais reprendre point par point tous les critères qui ont été demandé.

I.1. Analyse graphique du futur site web conduisant à un

mockup
Le premier critère qui nous a été demandé lors de la création du site web et une analyse
graphique. Une analyse graphique sert à mettre en place tous les éléments, toutes les couleurs et
tout ce qui se rapporte au design du site. Pour cela j'ai décidé de faire un mockup. Un mockup est
une maquette graphique du site. Qui sert à avoir une représentation graphique finale du futur site
web. Ce mockup présentera la plus part des éléments qui seront présent sur le site final. La fin de ce
mockup conduira à une première version graphique de notre site.

2
 I.2. Utilisation efficace des propriétés CSS pour une
intégration web minimaliste et optimisé à partir du
mockup

En plus du html, qui est utilisé pour crée notre site web, nous avons utilisé du CSS. Le CSS est
utilisé pour de la mise en forme des éléments dans le document. Par exemple, il permet de changer
la couleur ou la taille des titres. Avec le CSS on peut aussi créer des animations. Et pour cela, nous
devions utiliser des balises efficaces.

I.3. Mise en œuvre d'un balisage basé sur du HTML 5

Le HTML 5 permet de créer son site tout en respectant les nouvelles règles. C'est une version
célèbre du format HTML qui sert a concevoir des sites. La version HTML 5 apporte des nouveaux
éléments et nouveaux attributs. Le HTML 5 est un format développé par W3C qui est un organisme
international qui permet aux gens de communiquer avec une meilleure interopérabilité.

I.4. Mise en œuvre d'un formulaire de contacte

Dans notre site internet, il nous a été demandé de créer un formulaire de contacte. Ce dernier
sert pouvoir être joignable directement depuis notre site web par exemple, si quelqu'un qui visite
notre site veut avoir des renseignements ou pour tout autre raisons, il est important de faire se
formulaire de contact. Pour ce formulaire, les quelques éléments indispensables sont le nom et le
prénom de la personne, son adresse mail pour qu'il puisse nous contacter et ensuite, une zone de
texte pour le message en question. Et pour terminer un bouton pour que la personne puisse envoyer
sa requête.

I.5. Présence d'une animation basée CSS

Comme vue précédemment, le CSS permet la mise en forme des éléments sur une page web mais
on peut aussi faire des animations qui vont rendre notre page web plus attractive. Ces animations,
seront basées sur des éléments HTML.

3
 I.6. Organisation en single page

Avoir une organisation en single page permet d'avoir l'affichage de notre site sur une seule et
même page. Sans que quand l'on clique sur un bouton cela nous ouvre une autre page. De plus avoir
une organisation en single page permet de ne pas avoir de chargement contrairement au site faits
avec plusieurs pages. C'est une méthode très simple qui est beaucoup utilisé.

I.7. Respect des normes W3C

Comme nous l'avons vue précédemment, W3C est un organisme international. Nous demander
de respecter les normes W3C est quelque choses de très professionnalisant. Cela nous permet de
respecter des règles que les sites internet que nous utilisons respect aussi.
Les normes W3C peuvent être utiles dans deux raison. La première est le référencement naturel.
Un site qui est construit avec des normes W3C est plus lisible par les moteurs de recherche et donc il
sera mieux référencé et aura une visibilité beaucoup plus importante. La deuxième est pour
l'harmonisation du site. Il existe aujourd'hui beaucoup de moteur de recherches différentes et pour
être sûr que tous les potentiels utilisateurs de votre site ai le même rendue visuel vous vous devez de
respecter les normes W3C car avec ses normes, votre site est beaucoup plus susceptible d'avoir le
même rendue sur les différents moteur de recherche.
Et pour cela, il existe un outil pour vérifier si vous êtes aux normes.

I.8. Présence d'éléments multimédia

La présence d'éléments multimédia sur un site internet permet au d'accrocher l'œil des
visiteurs et donc que les gens s'intéresse plus à ce que vous proposer. Elle est aussi importante pour
mieux illustrer vos propos et donc être mieux compris.

I.9. Déploiement local

Pour ce dernier point, il nous est demandé de déployer notre site web en local et pour cela,
nous allons un environnement de déploiement simple qui s'appelle Github. C'est un logiciel open
source permettant le contrôle et la gestion de code source.

4
 III. Solutions proposé

I.10. Analyse graphique du futur site web conduisant à

un mockup.

Pour la maquette que j'ai utilisée pour mon site web, j'ai utilisé l'outil figma qui nous a été
présenté en cours. Cet outil est gratuit et permet de faire du maquettage de site web. Mon prototype
a beaucoup changé car je me suis rendu compte en créant mon site que il n'y avait pas de rapport sur
les différentes pages. J'ai donc opté pour quelque chose de plus sobre qui a un meilleur rendu visuel.
Voici a quoi ressembler mon maquettage :

5
 I.1. Utilisation efficace des propriétés CSS pour une
intégration web minimaliste et optimisé à partir du
mockup

Nous avons vue précédemment que le CSS permet de mettre en forme notre site web. Et qu'il
permet d'améliorer le rendue visuel du site.

Pour répondre à la problématique poser, j'ai utilisé dans le CSS des propriétés efficaces comme par
exemple : les display : flex, justify-content. Par exemple, ces deux balises permettent de positionner
un élément sur la page.

6
 I.2. Mise en œuvre d'un balisage basé sur du HTML 5

Pour résoudre cette problématique, il est important de respecter les nouvelles balises du HTML 5
car elles permettent une meilleure compréhension par tous les navigateurs. Ces balises la,
permettent aussi une meilleur structure du site. J'ai donc utilisé pour cela par exemple les balises
sections.

I.3. Mise en œuvre d'un formulaire de contacte

Pour cela, j'ai créé un formulaire de contacte.

Voici le rendu sur le site.

7
 Et voilà les lignes de code qui ont permis cela. Dans ces lignes, cela a permis de créer le
formulaire et aussi de mettre mes réseaux sociaux.

I.4. Présence d'une animation basée CSS

L'animation que j'ai décidé d'apporter à mon site web est les petites barres rouges qui quand l'on
passe dessus avec la souris, cela l'agrandit. On n'appelle cela un hover. J'ai aussi mis un hover sur la
scroll bar pour qu'elle change de couleurs.
Voilà le code qui permet de changer de couleurs la scrollbar.

8
 I.5. Organisation en single page

Nous pouvons voir que mon site web est une organisation en single page car à aucun moment le
site n'ouvre de nouveaux pages pour naviguer. Appart pour aller visiter mes réseaux sociaux.

I.6. Présence d'éléments multimédia

Dans mon site web, il y a deux éléments multimédia. Ces deux éléments sont des photos. La
premières est le fond de mon site et la seconde et ma photo de profile.