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
- Création d'un compte
- JetBrains
- Création d'un compte
https://www.jetbrains.com/shop/eform/students
- Installation de WebStorm
https://www.jetbrains.com/toolbox-app/
- Création d'un compte
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
- Combler les failles de SECURITE
- Assurer la compatibilité
- 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>
L'arbre <html>🎄
Text
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>🕵️♀️ 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
- 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, ...
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 <code></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 <code></p>
</body>
</html>body {
background: black;
color: white;
}
h1 {
color: yellow;
}main.css
index.html
Créer une palette de couleurs
Supports de cours
EMMET https://docs.emmet.io/
Mozilla Developer
CV - Premier objectif
un exercice == un dépôt
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
CV - Deuxième objectif
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
CSS - Les bases
Exercice "Fiffty Burgers"
* {
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
CV - Quatrième objectif
Tableaux / Flex / media queries
Tableaux / Flex / media queries
Histoire du Web et des navigateurs
By Steve Fallet
