Cours 1 - Introduction

Conception de Sites Web dynamiques 2024-2025

Motivation

  • temps d’écran
  • quelle utilisation ?
  • social network

Motivation

Exemples, non-exhaustifs (1/3)

1. Sites E-commerce

2. Prise de Rendez-vous

3. Réseaux Sociaux

4. Streaming Vidéo

5. Streaming Musical

Exemples, non-exhaustifs (2/3)

6. Recherche et Connaissance

7. Voyages et Réservations

8. Apprentissage en Ligne

9. Jeux en Ligne

10. Santé et Bien-être

11. Actualités et Médias

Exemples, non-exhaustifs (3/3)

12. Forums et Communautés

13. Blogging et Contenu

14. Services Financiers

15. Sites Gouvernementaux

16. Livraison et Restauration

17. Stockage et Cloud

Introduction - Sites Web Dynamiques

Une page web dynamique est générée à la demande, contrairement à une page statique. Son contenu peut varier en fonction de divers paramètres :

  • Données spécifiques au moment de la consultation (heure, utilisateur connecté, formulaire soumis, etc.).
  • Informations provenant d’une base de données.
  • Données externes récupérées via une API de (services tiers, flux RSS, etc.).

On distingue deux approches principales :

  • Programmation côté client (exécutée dans le navigateur, ex. : JavaScript).
  • Programmation côté serveur (génération du contenu avant l’envoi au client, ex. : PHP, Node.js).

Fonctionnement

  • Contenu des éditeurs
  • Contenu des utilisateurs (stocké dans une base de données)
  • Contenu depuis d’autres sites (via des API p.ex.)

Motivation

Motivation

Objectifs

Objectifs généraux :

  • « Comprendre le monde internet/(web) app mobile »
  • Devenir acteur de ce monde
  • Sensibiliser pour le potentiel, les possibilités, et aussi les dangers
  • Protection de la vie privée

Objectifs de conception & programmation :

  • Concevoir et développer des sites internet « statiques »
  • Concevoir et développer des sites internet « dynamiques »
  • Modéliser vos données dans uns base de données et y accéder

Objectifs « éthiques » :

  • Respect de droits d’auteurs (p.ex. droit d’usage dans google images)

Déroulement

UE joint avec SGBD (système gestion de base de données)

  • 9h CM + 16,5h TD
  • CM: 1 jeudi sur 2, 9h30- 10h50
  • TDs
    • Groupe G2 : jeudi, 11h00 - 12h20 (Salle Info)
    • Groupe G3 : jeudi, 14h00 - 15h20 (Salle Info)
    • Groupe G1 : jeudi, 15h30 - 16h50 (Salle Info) -
  • au total : 6 Séances de cours, 13 séances de TDs

Déroulement - Evaluation

1/3 Contrôle continu :

  • Vous devez finir chaque feuille pour la prochaine séance (contrôle continu) :

    Soumettre sur moodle tous les mercredi (avant 23h59):

  • Projet (3 personnes)

2/3 Examen terminal

  • Participation cours + TD essentiel

Préréquis - Sommaire

Compétences acquises lors de l’UE Programmation et Applications Interactives. En particulier :

Conception de sites web statiques :

  • Séparation structure+contenu (HTML5) et présentation
  • HTML5
  • CSS
  • CSS Framework : bootstrap
  • Mini-projet

Introduction - CMS

CMS (Content Management systems - Systèmes de gestion de contenu) les plus utilisés :

Introduction - CMS

Avantages :

  • Développement rapide
  • Personnalisations avec thèmes et extensions
  • Sécurité

Désavantages

  • Méconnsaissance du CMS
  • Flexibilité limité
  • Dépendance du modèle économique

Introduction - Programme

Statistique langages côtés serveur

Introduction - Mobile Apps vs. Web Apps

Mobile app avantages

  • Interactivité, jeux
  • Usage régulier et personalisation
  • Calculs complexes
  • Utilisation hors connexion
  • Fonctionnalités natives

Introduction - Mobile Apps vs. Web Apps

Web app avantages :

  • Disponible instantanément
  • Compatible pour tous les mobiles
  • Mise à jour facile
  • Trouvables facilement avec moteurs de recherche
  • Se partagent facilement (via URL)
  • Cycle de vie (ne s’effacent pas)
  • Temps et coût de développement
  • Maintenance facile

Rappel - HTML5

Hello World :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Matchball</title>
</head>
    <body>
        <h1>Bienvenue sur le site Matchball</h1>
    </body>
</html>

Séparation en partie <head></head> et <body></body>

Rappel - HTML5

Le Document Object Model (DOM) :

  • Le DOM est une interface de programmation (API) créé par le consortium W3C.
  • Avec le DOM, un document HTML5 peut être représenté sous la forme d’un arbre
  • ceci permet à des scripts d’examiner et de modifier le contenu du navigateur web

Rappel - HTML5

Le Document Object Model (DOM) :

Rappel - HTML5

Hyperliens :

<a href="http://www.equipe.fr">L'Equipe</a>

Rappel - HTML5

  • Paragraphes :
<p>
    Voici quelques exemples de liens hypertextes :
</p>
  • Listes non-triées :
<ul>
    <li>un lien relatif vers la page <a href="contact.html">contact</a></li>
    <li>un lien absolu vers <a href="https://www.wikipedia.org/">la page d'accueil de Wikipedia</a></li>
    <li>un lien absolu vers une page plus spécifique : un article sur les <a href="https://fr.wikipedia.org/wiki/V%C3%A9lo_%C3%A0_assistance_%C3%A9lectrique">vélos électriques sur wikipedia</a></li>
</ul>

Rappel - HTML5

  • Images :
<img src="image.png" alt= "Photo de Mbappé" />
<img src="images/image.png" alt= "Photo de Mbappé" />
<img src="../image.png" alt= "Photo de Mbappé" />

Rappel - Arborescence

└── cswd
    └── td1
        ├── index.html
        ├── css
        │   └── styles.css
        └── images
            ├── logo.png
            └── avatars
                ├── utilisateur-1.jpg
                ├── utilisateur-2.jpg
                ├── utilisateur-3.jpg
                └── utilisateur-4.jpg

Rappel - HTML5

Balises stucuturantes

Rappel - HTML5

HTML Validateur :

http://validator.w3.org/ http://html5.validator.nu

Ressources :

Rappel - CSS

HTML avec et sans CSS

Rappel - CSS

L’idée des règles CSS est de sélectionner un ou plusieurs balises HTML avec des sélecteurs afin d’y appliquer un ou plusieurs styles, définies entre accolades, et caractérisé par des propriétés auxquelles on attribue des valeurs. Ceci permet de préciser le style à appliquer aux balises sélectionnées.

Exemple pour sélectionner toutes les balises h1:

h1 {
    background-color: #CCCCCC
}

Rappel - CSS

Voici une petite synthèse du fonctionnement : En CSS (cascading style sheets), on définit un ensemble de règles, et les règles ont la syntaxe suivante :

sélecteur {
    propriété : valeur; 
    propriété : valeur; 
    ...
}

Exemple pour sélectionner toutes les balises h1 :

h1 {
    background-color: #CCCCCC
}

Rappel - CSS

Il est conseillé de stocker les règles CSS dans un fichier séparé (ici styles.css) afin de pouvoir l’inclure dans plusieurs fichiers HTML5.

A inclure entre le <head> et </head>.

<link href="css/styles.css" rel="stylesheet" type="text/css">

Rappel - CSS

<p class="loremipsum">...</p>

Sélecteur pour les classes :

.loremipsum
{
    font-style: italic;
    text-align: left;
}

Rappel - CSS

<p id="prefere">...</p>

Sélecteur pour les identifiant :

#prefere
{
    font-weight: bold;
}

Rappel - CSS

“Cascading style sheets” :

  • Le nom “cascade” vient de la combinaison de différentes sources de styles appliqués à un même document, selon leur degré respectif de priorité.
  • Si plus d’une règle s’applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique.
  • Par exemple, un sélecteur id est plus spécifique qu’un sélecteur de classe, qui lui-même est plus spécifique qu’un sélecteur de balise.

Rappel - CSS

Page web adaptatif (Responsive web design)

Rappel - CSS

Page web adaptatif (Responsive web design)

Rappel - CSS

Page web adaptatif (Responsive web design)

Rappel - CSS

Page web adaptatif (Responsive web design)

Rappel - CSS

Page web adaptatif (Responsive web design)

  • Les “media queries :”
@media screen and (max-width: 640px) {
  .loremipsum {
    background-color : #FFFFFF;
  }
}
@media screen and (min-width: 641px) {
  .loremipsum {
    background-color : #CCCCCC;
  }
}

Rappel - CSS

Ressources :

Sites web dynamiques

Processus de création de site Web

  • simple page statique (HTML5, CSS)

ou page dynamique - éventuellement avec connexion à une base de données.

Il faut distinguer entre la programmation côté client ou côté serveur (architecture client serveur)

Sites web dynamiques

Sites web statiques - HelloWorld

<!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="utf-8" />
            <title>Hello World statique</title>
</head>
        <body>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
            <p>Hello World !</p>
        </body>
    </html>

Sites web dynamiques - HelloWorld

<!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="utf-8" />
            <title>Hello World statique</title>
</head>
        <body>
            <?php
            for ($i=0; $i<10; $i++)
            {
            ?>
                <p>Hello World !</p>
            <?php
            }
            ?>
            
        </body>
    </html>

Sites web dynamiques - HelloWorld

<!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="utf-8" />
            <title>Hello World statique</title>
</head>
        <body>
            <?php
            
            if (!isset($_GET['n']))
                $n=5; 
            else
                $n = $_GET['n'];
                
            for ($i=0; $i<$n; $i++)
            {
            ?>
                <p>Hello World !</p>
            <?php
            }
            ?>
            
        </body>
    </html>

Sites web dynamiques - HelloWorld

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8" />
    <title>Hello World statique</title>
</head>

<body>

    <?php
    if (!isset($_GET['n']))
        $n=5; 
    else
        $n = $_GET['n'];

    for ($i=0; $i<$n; $i++) {
    ?>
        <p>Premier exemple HTML5</p> 
   
    <?php
    }
    ?> 

</body>
</html>