Histoire du Web

et des navigateurs

  1. GitHub
  2. JetBrains

Mise en place des outils

Objectif : créer un site web

Responsive

Depuis 2014 on passe plus
de temps à surfer sur notre
smartphone que sur notre PC

 

L'histoire du Web

1969 Connexion de 4 ordinateurs entre 4 universités américaines
1971 23 ordinateurs sont reliés aux USA
1973 L'Angleterre et la Norvège les rejoignent avec chacun 1 ordinateur
1982 Définition du protocole TCP/IP et du mot « Internet »
1983 Premier serveur de noms de sites
1984 1 000 ordinateurs connectés
1987 10 000 ordinateurs connectés
1989 100 000 ordinateurs connectés
1990 Invention du web par Tim Berners-Lee qui travaillait au CERN
1991 Annonce publique du World Wide Web
1992 1 000 000 ordinateurs connectés
1996 10 000 000 ordinateurs connectés
2000 Explosion de la Bulle internet

Comment ça marche le Web ?

Le navigateur interprète le HTML et CSS

HTML et CSS sont
deux « langues » qu'il faut savoir parler pour créer des sites web

l y a eu plusieurs versions des langages HTML et CSS. Les dernières versions sont HTML5 et CSS3.

  • Surfer : consulter des pages web
  • Navigation : Suivant / Précédent
  • Historique
  • Favoris
  • Mettre à jour son navigateur
  • Outil pour les développeurs

Que peut-on faire avec un navigateur ?

 

Quels navigateurs connaissez-vous , lesquels sont les plus utilisés ?

Vous avez été hacké !

 

Outils pour vos  mots de passe

Structure

<html>

Anatomie d'un

élément HTML

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Geek Power</title>
    </head>

    <body>
        <h1>Vive le Kode</h1>
        <p>J'aime le <a href="http://www.kode.ch">Kooode</a> !</p>
    </body>
</html>

Voir ce code en ACTION 🚀

AFFICHER le code HTML : CRTL + U

 

MODIFIER ce code ⌨️ [clic ici]

L'arbre <html>🎄

Text

Text

Fils de <head>

Ancêtres de "Koode"

Clic sur la photo pour ouvrir la page

🕵️‍♀️ Inspecter une page web HTML

 

🕵️‍♀️ Inspecter une page web HTML

 

Rechercher, modifier, ajouter

 

Style { css }

🧘 CSS Zen Garden 🧘‍♂️

 

La puissance du CSS 👩‍🎤💪

Anatomie d'une

règle CSS

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Geek Power</title>
        <style>
            body {
                background: black;
                color: white;
            }

            h1 {
                color: red;
            }

            p {
                color: lime;
            }

            a {
                color: yellow;
            }
        </style>
    </head>

    <body>
        <h1>Vive le Kode</h1>
        <p>J'aime le <a href="http://www.kode.ch">Kooode</a> !</p>
    </body>
</html>

Voir ce code en ACTION 🚀

MODIFIER ce code ⌨️

🕵️‍♀️ Inspecter le style d'une page

Clic sur la photo pour ouvrir la page

🕵️‍♀️ Inspecter le style d'une page

🎨 Modifier le style - AVANT

🖼 Modifier le style - APRÈS

Éditeur de style : modifier et enregistrer 💾

Coder ?

Oui mais avec un gestionnaire de version !

Créer un dépôt GitHub

  • Créer un nouveau dépôt "New repository"
  • L'appeler premier-code
  • Créer un nouveau fichier index.html
  • Ajouter le code :<h1>mon premier code</h1>
  • Configurer le "mode page" sur GitHub

GitHub Flow

Comment travailler en local ?

Notre éditeur de code
WebStorm

 

  • Coloration syntaxique
  • Auto-complétion
  • Indentation automatique
  • Raccourcis
  • Rechercher / remplacer
  • Intégration de git et github
  • FTP, BD, ...

Réseau WIFI HOTSPOT 📶

Travailler avec WebStorm et GitHub

  1. Connecter son compte GitHub avec WebStorm
  2. Cloner, récupérer un dépôt GitHub
  3. Créer une nouvelle branche pour y faire ses modifications
  4. Modifier le(s) fichier(s) du projet
  5. COMMIT : Créer un nouvelle version du projet.
    • Ne pas oublier d'ajouter un message !
  6. PUSH : Pousser la nouvelle version sur GitHub
  7. Faire une demande de fusion PULL REQUEST pour ajouter ses modifications à la branche principale, la branche main

 

Configurer WebStorm

  • Créer un compte jetbrains avec son email @divtec.ch
    >> Faire la demande de licence <<
  • Créer un nouveau projet
  • Ajouter le dictionnaire français (Natural languages)
  • Zomm avec roulette souris (Mouse Wheel)
  • Aperçu rapide
  • HOT RELOAD

Réseau WIFI HOTSPOT 📶

un exercice == un dépôt

Récupérer le premier  exercice 🥇

  1. Trouver son nom et prénom
  2. Accepter l'exercice

Mon 1er <code> 1er projet WS

<!DOCTYPE html>
<html lang="fr"> <!-- précise la langue du contenu de la page -->
<head>
    <!-- Jeu de caractères utilisé pour l'encodage du fichier HTML -->
    <meta charset="UTF-8">
    
    <!-- Très important !!! Bloque le zoom automatique sur smartphones -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titre de la page -->
    <title>Steve Fallet | Mon 1er code</title>
    
    <!-- Auteur -->
    <meta name="author" content="Laure Dinateur">
   
    <!-- Favicons : icône de la page dans plusieurs tailles et formats -->
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="./site.webmanifest">
</head>
<body>
    <h1>Titre de la page</h1>
    <p>Mon prmier &lt;code&gt;</p>
</body>
</html>

Créer une <favicon>

S'inscrire au cours

CV - Premier objectif

👾 Exemple de CV 👾

Démarrer le cours

EMMET https://docs.emmet.io/

Supports de cours

Télécharger les supports

Et si on ajoutait un peu de {css}

<!DOCTYPE html>
<html lang="fr"> <!-- précise la langue du contenu de la page -->
<head>
    <!-- Jeu de caractères utilisé pour l'encodage du fichier HTML -->
    <meta charset="UTF-8">
    
    <!-- Très important !!! Bloque le zoom automatique sur smartphones -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titre de la page -->
    <title>Steve Fallet | Mon 1er code</title>
    
    <!-- Auteur -->
    <meta name="author" content="Laure Dinateur">
    
    <!-- ************** CSS ************** -->
    <link rel="stylesheet" href="styles.css">
   
    <!-- Favicons : icône de la page dans plusieurs tailles et formats -->
    <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
    <link rel="manifest" href="./site.webmanifest">
</head>
<body>
    <h1>Titre de la page</h1>
    <p>Mon prmier &lt;code&gt;</p>
</body>
</html>
body {
	background: black;
	color: white;
}

h1 {
	color: yellow;
}

main.css

index.html

CSS Colour Game

Créer une palette de couleurs

Coolors

Adobe Color

CV - Deuxième objectif

👾👾👾 Exemple d'un CV... de malade 👾👾👾

Mozilla Developer

CSS

HTML

Modifier et publier

  • Cloner le dépôt de l’exercice sur votre PC
  • Créer une nouvelle branche
  • Modifier son projet (ajouter ou modifier un fichier)
  • Créer une nouvelle version - commit
  • Envoyer son code sur GitHub - pull
  • Fusionner son code avec la branche principale
    --> pull request
  • La modification est en ligne sur votre branche de production

HTML/CSS Bases

🥇GO GO GO🥇

Google Web Fonts

  1. Trouver une police sur fonts.google.com
  2. Utiliser Google Webfonts Helper
  3. Copier les polices dans votre projet
  4. Copier le code d’importation @font-face
    dans votre fichier CSS

Alternative : https://www.fontsquirrel.com

Générateurs d'images

CV - Troisième objectif

Je veux jouer à Flexbox Froggy

Je veux jouer !!!!

CSS - Les bases

🥇GO GO GO🥇

Exercice "Fiffty Burgers"

Récupérer et cloner l'exercice

https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

* {
    box-sizing: border-box;
}
li {
  background-color: #efefef;
  padding: 10px;
  margin: 2px;
}
/* premier élément <li> */
li:first-child {
  background-color: lime;
}
/* dernier élément <li> */
li:last-child {
  background-color: red;
}
/* 8e <li> */
li:nth-child(8) {
  background-color: purple;
}
/* tous les 5 <li> (multiples de 5) */
li:nth-child(5n) {
  background-color: yellow;
}
/* les <li> pair */
li:nth-child(even) {
  border: 4px solid red
}
/* les <li> impair */
li:nth-child(odd) {
  border: 4px solid green
}

Sélecteurs de position

DEMO

CV - Quatrième objectif

Tableaux / Flex / media queries

🥇GO GO GO🥇

Tableaux / Flex / media queries

Récupérer et cloner l'exercice

101 2023 - Histoire du Web et des navigateurs

By Steve Fallet

101 2023 - Histoire du Web et des navigateurs

  • 218

More from Steve Fallet