Construction d'un Twitter-like
du 29 janvier au 1er février 2024
Martin Pierret (N16)
Datadog
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
- Appréhender la genèse du web
- 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-2024-eleves
- Installer miniserve : https://github.com/svenstaro/miniserve
Spécifications simplifiées
- Pouvoir s'inscrire et se connecter
- Follow des utilisateurs
- Voir les messages des comptes suivis sur la timeline
- Avoir une timeline automatique (IA ?)
- Poster des messages
- Liker des messages
- Voir les profils
- Répondre à des messages
- Voir l'historique des messages likés
- Rechercher un utilisateur
- Rechercher des messages
- Poster des images / vidéos
- Suggestions de comptes
- Bloquer des comptes
É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
Priorités
- Pouvoir s'inscrire et se connecter
- Poster des messages
- Voir les messages de tous les comptes
- Voir les profils
- Follow des utilisateurs
- --------------
- Voir les messages des comptes suivis sur la timeline
- Rechercher un utilisateur
- Liker des messages
- Répondre à des messages
- Poster des images / vidéos
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>
Documentation et compatibilité
https://developer.mozilla.org/
Données structurées
https://ogp.me/
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>
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
WebComponents
Lit
Questions ?
cours-web-mines-01-2024
By Julien Blatecky
