Construction d'un Twitter-like test
du 28 novembre au 1er décembre 2022
Martin Pierret (N16)
Datadog
Julien Blatecky (N10)
Creatiwity
Datadog
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
- Revoir 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-2022
- Depuis le terminal, dans le dossier cloné : npm install
Spécifications simplifiées
- Créer un compte utilisateur
- Authentification (auth, [Nice to have] récupération de mot de passe)
- Voir les autres comptes et pouvoir les suivre
- Voir les messages des comptes suivis sur la timeline
- Poster des messages
- Liker des messages
- Retweeter des messages
- [Nice to have] Modifier un compte utilisateur
- [Nice to have] Poster des images
- [Nice to have] Répondre à des messages
- [Nice to have] Rafraichissement automatique des messages postés
- [Nice to have] Partage des fichiers
- [Nice to have] Supprimer des messages
- [Nice to have] Rechercher des messages ou des auteurs
É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
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é
Données structurées
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
Questions ?
cours-web-mines-2022
By Julien Blatecky
