Cours Web dev
ESILV 2020-01
Outils
- Visual Studio code (éditeur de texte)
- Hyperjs (terminal)
- Node.js (Environnement d'exécution de JS)
- Npm (gestionnaire de dépendances)
- serve (package npm : serveur web statique)
- browsersync (serveur web statique avec live-reload)
Web dev
Pourquoi est-ce difficile ?
3 langages : HTML, CSS, JavaScript
De multiples environnements d'exécution
(Firefox, Chrome, Edge, Safari, Opera, Android view, Safari mobile, Node.js...)
Accessibilité
Mal voyant, non-voyant (lecteur d'écran), déficient moteur (pas de souris...)
Web dev
Les sites de références
MDN : Mozilla Developer Network
CSS tricks
Stackoverflow
YDKJS
Eloquent JavaScript
Quirksmode
csswizardry
2ality
HTML
Squelette
-
Doctype
-
<html>
-
<head>
-
<body>
Squelette d'un fichier HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Titre apparaissant dans l'onglet</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<!-- Balise html : Noeud racine du document HTML -->
<html lang="fr">
<!-- Balise head :
pour le titre du document,
les meta-données,
et les fichiers annexes (surtout CSS) -->
<head>
<!-- Jeu de caractère utilisé dans
l'éditeur de texte ayant édité ce fichier -->
<meta charset="utf-8" />
<!-- Compatibilité pour les navigateur IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Titre du document -->
<title>Titre apparaissant dans l'onglet</title>
<!-- Gestion du zoom du document -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Association d'une feuille de style -->
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il doit être ici... -->
<script src="main.js"></script>
</head>
<body>
<!-- Association d'un fichier JavaScript
/!\ selon la spec HTML il NE doit PAS être ici, mais en pratique, si... -->
<script src="main.js"></script>
</body>
</html>
HTML
Les principales balises (tags) sémantiques (1) HTML5
<nav> (seulement la nav de haut niveau)
<main> (1 seul)
<header>
<footer>
<section>
<article>
<aside>
<video>, <audio>, <figure>...
HTML
Les principales balises (tags) sémantiques (2)
-
<h1>, <h2>...<h6>
-
<p>
-
<a>
-
<ul>, <ol> et <li>
-
<em> et <strong>
-
<table>, <tr>, <th> et <td>
-
<img />
-
<button>
HTML
Les principales balises (tags) sémantiques (3)
-
<form>
-
<input type="text|checkbox|radio|number|date|color...">
-
<select> et <option>
-
<textarea>
HTML
Les principales balises (tags)
non-sémantiques
-
<span>
-
<div>
HTML
D'autres balises (tags)
sémantiques (3)
-
<dl> <dt> <dd>
-
<fieldset> <legend>
-
<caption>
HTML
Les attributs (attributes)
-
<html lang="fr">
-
<input type="text">
-
<input type="password">
-
<input type="checkbox">
-
<input type="email">
-
<input type="number">
-
<a href="https://www.duckduckgo.com">
-
<a id="un-nom-d-ancre">
HTML
Les attributs (attributes)
spéciaux
-
id
-
class
HTML
Les autres balises
de head
-
<meta>
-
<script></script>
-
<style></style>
-
<link />
CSS
- Standard ouvert
- Séparer contenu et forme
- W3C
- CSS 1 : 12/1996
- CSS 2.0 : 05/1998
- CSS 2.1 : 06/2011
- CSS 2.2 : 2016
- CSS 3 : modules
- CSS 4 n'existe pas
CSS
- Règle
- Sélecteur(s)
- Déclarations(s)
- Déclaration
- Propriété
- Valeur(s)
/* Règle */
.classe { /* Sélecteur */
background-color: #555; /* Déclaration */
/* propriété: valeur(s); */
background: #555 url(/chemin/de/croix.png) no-repeat center center;
}
Les sélecteurs CSS
/* Sélecteur universel */
*
/* Sélecteurs de type */
div
/* Sélecteurs descendants */
div span
/* Sélecteurs d'enfant */
ul > li
/* Les sélecteurs adjacents */
h2 + p
/* La pseudo-classe */
li:first-child
/* Les pseudo-classes de lien */
a:link
a:visited
/* Les pseudo-classes dynamiques */
a:active
a:hover
a:focus
/* La pseudo-classe :lang() */
h1:lang(fr)
/* Sélecteurs d'attribut */
abbr[title]
/* Sélecteurs d'attribut */
fieldset[foo="warning"]
label[foo~="warning"]
aside[lang|="en"]
/*************************
* Seulement en HTML *
*************************/
/* Sélecteurs de classe */
/* Identique à DIV[class~="warning"] */
.warning
/* Sélecteurs d'ID */
#myid
/* Les pseudo-éléments */
:first-line
:first-letter
:before
:after
Box model
Contenu
Padding
Border
Margin
Client - Serveur
Requête (Request)
Réponse (Response)
Client
Serveur
JavaScript
- Créé par Brendan Eich
- En 1995
- En 10 jours
- Chez Netscape
- Standardisé
- ECMA => ECMAScript
- TC39
JavaScript
- Un seul "thread"
- Héritage prototypal
- Une fonction est "citoyen de première classe"
- Types dynamiques
Ressources
-
MDN Mozilla Developer Network https://developer.mozilla.org/fr/docs/Web
-
https://movethewebforward.org/
-
http://html5doctor.com/
-
https://scotch.io/
-
https://css-tricks.com/
-
https://www.alsacreations.com/
Ressources
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Cours ESILV
By Stanislas Ormières
Cours ESILV
- 808