Construction d'un forum de discussion

22 et 23 novembre 2021

Julien Blatecky (N10)

Creatiwity

Creat'

  • Fondé en Octobre 2013, avec Johan Dufau (N2010)

  • Clients : Air France, Gucchi, ALK, MSD, Abbvie, monAlbumPhoto, Jardins d'Arcadie, Edenred, l'Oréal, …

  • 6 expertises :

    • Design

    • Développement

    • Stratégie Digitale

    • Data

    • DevOps

    • Suivi et Veille

Stages développeur de 3 à 6 mois

Présentation du projet

Objectifs du cours

Objectifs du cours

  • Comprendre le fonctionnement du web
  • Comprendre le processus de réalisation d'un projet complexe
  • Savoir créer un système client-serveur
  • Savoir déployer un site

Pré-requis

  • Installer :
    • Visual Studio Code
    • Node.JS
  • Forker puis cloner github.com/julien1619/cours-mines-forum-2021
  • Depuis le terminal, dans le dossier cloné : npm install

Spécifications simplifiées

  • Créer un forum de discussion avec choix du pseudo
  • [Nice to have] Rafraichissement automatique des messages postés
  • [Nice to have] Création de plusieurs salles de discussion
  • [Nice to have] Authentification

Étapes de conception

  • Analyse des fonctionnalités nécessaires
  • Création d'un mockup décrivant l'UX
  • Conception du modèle de données en vue de la création d'une API sur un serveur
  • [Facultatif ici] Phase de design
  • Développement
  • Déploiement

Analyse des fonctionnalités

Mockup UX

API / Serveur

Fonctionnalités avancées

Développement

Architecture globale

Client web

Serveur / API

HTTP GET, POST

Développement

Partie statique

HTML
CSS
Bootstrap

HTML

Langage de balisage

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exemple de fichier HTML</title>
  </head>
  <body>
    <h1>Titre</h1>

    <p>Un paragraphe de texte quelconque.</p>
  </body>
</html>

Structurer le contenu de manière sémantique

Titres, différents niveaux

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>

Paragraphes

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Balises importantes

<div></div>
<span></span>

Div et déclinaisons sémantiques

<div>
<article>
<nav>
<section>

Article de blog

<article>
  <h1>Titre de l'article</h1>

  <h2>Partie 1</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <h2>Partie 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Article de blog

<article>
  <h1>Titre de l'article</h1>

  <h2>Partie 1</h2>

  <p>Lorem ipsum ...</p>

  <p>...</p>

  <h2>Partie 2</h2>

  <p>Lorem ipsum ...</p>

  <p>...</p>
</article>

Liens

<a href="http://monsite.fr">Mon Site</a>

Listes

<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
  <li>Élément 4</li>
  <li>Élément 5</li>
</ul>

Tableaux

<table>
  <tr>
    <td>Colonne 1</td>
    <td>Colonne 2</td>
    <td>Colonne 3</td>
  </tr>
</table>

Tableaux avec en-tête

<table>
  <tr>
    <th>En-tête</th>
    <td>Contenu</td>
  </tr>
</table>

Formulaires

<form method="post">
</form>

Formulaires

<form>
  <label for="firstname"></label>
  <input name="firstname" placeholder="Prénom"/>

  <label for="lastname"></label>
  <input name="lastname" placeholder="Nom"/>
</form>

Formulaires - inputs

<label for="firstname">Homme</label>
<input type="text" id="firstname" name="gender"/>

<input type="email" id="email" name="email"/>
<input type="password" id="password" name="password"/>
<input type="radio" id="gender-male" name="gender" value="male"/>
<input type="radio" id="gender-female" name="gender" value="female"/>
<input type="checkbox" id="cgu" name="cgu" value="cgu"/>

<button type="button">Bouton standard</button>
<button type="submit">Envoyer</button>

Medias

<img src="image.png" alt="Description de l'image"/>

<video src="video.mp4"></video>
<audio src="audio.mp3"></audio>

Compatibilité

http://caniuse.com/

Microdata

https://schema.org/

Amélioration de la compréhension du contenu par les moteurs de recherche

CSS

Feuille de style

Styliser le contenu en termes de positionnement, couleurs, taille, …

Import d'un fichier CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cours HTML, CSS, Bootstrap</title>

    <!-- CSS -->
    <link href="src/css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="container-fluid">
    </div>
  </body>
</html>

Import d'un fichier CSS en JavaScript avec Webpack

import './css/style.css';

Exemple de CSS

h2 {
  font-size: 1.8em;
  color: #fbb040;
}

Sélecteurs

div {
  ...
}
#main-content {
  ...
}
.box {
  ...
}

<div id="main-content" class="box"></div>

Sélecteurs

body #main-content div.box > a, a.special {
  ...
}

Propriétés

body #main-content div.box > a, a.special {
  font-size: 18px;
  font-weight: bold;
  font-family: sans-serif;

  color: #000;
  background-color: #fff;
  background-image: url('../image.png');
}

Propriétés

body #main-content {
  position: relative;
}
body #main-content div.box > a, a.special {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  display: block; /*hidden, inline, ...*/
}

Bootstrap

Framework HTML, CSS et JavaScript

Implémentation statique du mockup

Développement

Partie dynamique

JavaScript

TypeScript

React

Next.js

Connexion à l'API

  • GET /messages
  • POST /messages

Questions ?

cours-web-mines-nov-2021

By Julien Blatecky

Made with Slides.com

cours-web-mines-nov-2021

  • 130

More from Julien Blatecky