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

  • 173
Loading comments...

More from Stanislas Ormières