Histoire du Web

et des navigateurs

GitHub
- Création d'un compte
  https://github.com/signup
- Activation du pack étudiant
  https://education.github.com/pack
JetBrains
- Création d'un compte
  https://www.jetbrains.com/shop/eform/students
- Installation de WebStorm
  https://www.jetbrains.com/toolbox-app/

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.

https://www.eff.org/pages/tor-and-https

Surfer : consulter des pages web
Navigation : Suivant / Précédent
Historique
Favoris
Mettre à jour son navigateur
- Combler les failles de SECURITE
- Assurer la compatibilité
  - https://caniuse.com
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é !

Proton Pass
https://proton.me/fr/pass
Dashlane
https://dashlane.com
KeePass
https://keepass.info/
1Password
https://1password.com/fr
Gestionnaires des OS
ou des navigateurs

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

Fils de <head>

Ancêtres de "Koode"

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 une page web HTML

[F12] ou clic droit > inspecter

Ouvrir le site de Laure 🚀

Rechercher, modifier, ajouter

🕵️‍♀️ 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 !

Documentation GitHub

Configurer

Ajouter son nom et son prénom
Menu Settings => Public Profile => Name
Ajouter une adresse email privée
Menu Settings => Email
Rejoindre le GitHub de la DIVTEC
Vous recevrez une invitation par email

Créer un dépôt

Créer un nouveau dépôt : premier-code
Ajouter un nouveau fichier "index.html"
Ajouter le code HTML suivant à index.html

    <h1>mon premier code</h1>

Commiter avec le message "Création index.html"
Configurer le mode page sur GitHub (voir vidéo slide suivant)

GitHub Flow

Créer une nouvelle branche "paragraphes"
Modifier index.html et y ajouter deux paragraphes

<p>J'aime le HTML</p>
<p>J'adore le CSS</p>

Commiter les changements avec le message "Ajout de deux paragraphes"
Créer une Pull Request pour fusionner "paragraphes" avec "master"
- Attention au sens de la flèche : master <= paragraphes

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

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

Configurer WebStorm

Se connecter avec son compte JetBrains
Cloner un dépôt / créer un nouveau projet
Ajouter le dictionnaire français (Natural languages)
Zoom avec roulette souris (Mouse Wheel)
Aperçu rapide
HOT RELOAD

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">
</head>
<body>
    <h1>Titre de la page</h1>
    <p>Mon prmier &lt;code&gt;</p>
</body>
</html>

Créer une <favicon>

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

Supports de cours

Télécharger les supports

EMMET https://docs.emmet.io/

S'inscrire au cours

Mozilla Developer

CSS

HTML

CV - Premier objectif

👾 Exemple de CV 👾

Démarrer le cours

un exercice == un dépôt

Récupérer le premier exercice 🥇

Trouver son nom et prénom
Accepter l'exercice

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🥇

CV - Deuxième objectif

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

Google Web Fonts

Trouver une police sur fonts.google.com
Utiliser Google Webfonts Helper
Copier les polices dans votre projet
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

Histoire du Web

Mise en place des outils

Objectif : créer un site web

Responsive

L'histoire du Web

Comment ça marche le Web ?

Le navigateur interprète le HTML et CSS

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

Anatomie d'un

élément HTML

L'arbre <html>🎄

Style { css }

🧘 CSS Zen Garden 🧘‍♂️

La puissance du CSS 👩‍🎤💪

Anatomie d'une

règle CSS

🕵️‍♀️ Inspecter une page web HTML

[F12] ou clic droit > inspecter

Rechercher, modifier, ajouter

🕵️‍♀️ 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 !

Configurer

Créer un dépôt

GitHub Flow

Comment travailler en local ?

Notre éditeur de code WebStorm

Travailler avec WebStorm et GitHub

Configurer WebStorm

Mon 1er <code> 1er projet WS

Créer une <favicon>

Créer une palette de couleurs

CV - Premier objectif

un exercice == un dépôt

Modifier et publier

HTML/CSS Bases

CV - Deuxième objectif

Google Web Fonts

Générateurs d'images

CV - Troisième objectif

CSS - Les bases

Exercice "Fiffty Burgers"

Sélecteurs de position

CV - Quatrième objectif

Tableaux / Flex / media queries

Tableaux / Flex / media queries

Notre éditeur de code
WebStorm