Ressources du cours web 2020

Publié le par

Ce cours s’adresse aux étudiants des options peinture, dessin, céramique, reliure, sculpture, espace urbain, qui ont cours avec Serge.
Pour les étudiants ayant cours avec Etienne: http://school.etienneozeray.fr/cambre/web/.
Pour ceux ayant cours avec Boris: https://lacensav.github.io/cours_web_2e/ .
Et enfin, ceux ayant cours avec Nicolas, ils pourront trouver leurs références en suivant: https://webb2.netlify.com/ .
Les trois sites se complètent.

Cette page a pour but de proposer un accès simple et facile aux références données durant le cours et à le compléter par d’autres liens. En aucun cas il ne s’agit d’un syllabus, de notes de cours. Elle liste également les exercices que vous devez réaliser ainsi que les dates de remise. Pour rappel nous sommes en évaluation continue.

Les deux heures de cours se structurent généralement comme suit:

Réponses aux questions suite à l’exercice donné au cours précédent.
Apprentissage technique (HTML, CSS, WordPress…).
Contexte culturel, historique, social des concepts, phénomènes abordés.
Artistes utilisant les concepts évoqués ou en rapport avec l’exercice à réaliser pour la semaine suivante.
Explication de l’exercice pour la semaine suivante.

Cours 1 du 6/7 février 2020

« Couverture » du cours:
Tattoo on sunset

Introduction:
Quelques questions posées en introduction pour commencer à baliser le cours:

Histoire d’Internet:

  • Différence entre le Web et Internet ?
  • Quand et où est né Internet ?
  • Quand et où est né le Web et par qui a t-il été inventé? Avec quel objectif ?
  • Les différents services d’Internet ?

Une Histoire d’Internet. Une histoire du Web.

Le web en 1996: A VHS Tape From 1996 Demonstrates What the Internet Looked Like in Its Early Days.

Expérimenter le web de 1990 dans on navigateur: https://worldwideweb.cern.ch/.

Qu’est-ce q’un navigateur ?
Les différents navigateurs.

Technique:
HTML: Les bases du HTML sur le site francophone openclassrooms.
Le traitement de texte spécialisé pour le HTML:
Atom.
 https://www.sublimetext.com/.
Visual studio code.

Pour ce premier cours nous utiliserons TextEdit sur Mac, configuré pour sauver en ASCII 7bits, le format avec l’extension .txt .


Les balises vues:

<!DOCTYPE html>
<html>
<head>
<title>Contenu de l'onglet</title>
</head>
<body>

Contenu de la page.

</body>
</html>

Travail:
Mettre en ligne sur Netlify la page réalisée dans le cadre du cours.
M’envoyer l’adresse par mail.

Cours 2 du 13/14 février 2020

Art:
Rafael Rozendael.
art website sales contract.
Enregistrement de noms de domaine exemple chez Gandi et GoDaddy.

Olia Lialina: Summer.

Exposition au Jeu de Paume à Paris du 11 février au 07 juin 2020: le supermarché des images.

Techno:
Passage à un éditeur spécialisé: Visual studio code.

HTML:
Le doctype, la langue, le charset, titres de niveau 1à 6, paragraphe, gras et italique, retour à la ligne, ligne de séparation, les images, les attributs, le principe de la page index.html.
Autoformation en HTML sur Openclassrooms en français, anglais et espagnol.
Memento des balises HTML.
HTML5 cheat sheet. (aide mémoire HTML5)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>le contenu de l'onglet</title>
</head>
<body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <p>Le contenu du premier paragraphe</p>
    <p>Le contenu du deuxième paragraphe<strong>gras</strong> <em> italique</em><em><strong>italique gras</strong></em> </p>
    <hr width="50%">
</body>
</html>

Hébergement chez Netlify.

Travail:
Ecrire une page HTML en utilisant correctement les balises vues au cours: H1, H2, P, HR, BR, STRONG, EM. Pour le contenu vous pouvez prendre la matière sur la page wikipedia d’un artiste, par exemple la partie consacrée à la biographie de Manet. Votre page doit contenir au moins une balise H1 (biographie) et quelques balises H2 (enfance, apprentissage, début…). Utilisez à bon escient au moins une balise STRONG et une balise EM.
Mettre en ligne sur Netlify. Vous avez donc maintenant deux projets hébergés chez Netlify, deux URL différentes.

Cours 3 du 20/21 février 2020

Art:
Summer de Olia Lialina.
My boyfriend came back from the war de Olia Lialina. Et la page de remix.
Jodi, wwwwwwwww.jodi.org
Où voir du Net Art ? Spamm.

Techno:
HTML:
Le doctype, la langue, le charset, titres de niveau 1à 6, paragraphe, gras et italique, retour à la ligne, ligne de séparation, les images, les attributs, le principe de la page index.html.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>le contenu de l'onglet</title>
</head>
<body>
    <h1>Titre de niveau 1</h1>
    <h2>Titre de niveau 2</h2>
    <p>Le contenu du premier paragraphe</p>
    <p>Le contenu du deuxième paragraphe<strong>gras</strong> <em> italique</em><em><strong>italique gras</strong></em> </p>
    <hr width="50%">
    <IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
    <UL> 
      <LI><A HREF="gravure.html" TITLE="vers mon travail de gravure"  TARGET="_blank">Gravure</a></LI>
      <LI><A HREF="photo.html" TITLE="vers mon travail de photo" TARGET="_blank">photo</a></LI>
      <LI><A HREF="peinture.html" TITLE="vers mon travail de peinture" TARGET="_blank">peinture</a></LI>
    </UL>
</body>
</html>

CSS:
Feuille de style externe.

h1
{
    color: maroon;
}

p
{
    color: rgb(240,96,204);
}
body
{
    background-color: black; /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
}

body
{
    background-image: url("soleil.png");
    background-attachment: fixed; /* Le fond restera fixe */
    background-repeat: no-repeat; /* Le fond ne sera pas répété */
    background-position: top right; /* Le fond sera placé en haut à droite */
}

Travail:
A partir de la base de la semaine dernière, completer la page avec une liste, une image. Y ajouter une feuille de style qui changera, par exemple la couleur de fond de la page.
Mettre en ligne sur Netlify. Vous avez donc maintenant trois projets hébergés chez Netlify, trois URL différentes.

Cours 4 du 27/28 février 2020

Art:
241543903 (la tête dans le frigo)241543903; THE STORY BEHIND THE CRAZE
1:22 eyes closed.

Où voir du net art ? Net Art Anthology sur Rhizome.

HTML:
Autoformation en HTML sur Openclassrooms en français, anglais et espagnol.
Memento des balises HTML.
HTML5 cheat sheet. (aide mémoire HTML5)
les liens (relatifs et absolus), URL.

Techno:
HTML:
Le doctype, la langue, le charset, titres de niveau 1à 6, paragraphe, gras et italique, retour à la ligne, ligne de séparation, les images, les attributs, le principe de la page index.html.

<!DOCTYPE html>
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="style.css">
     <title>le contenu de l'onglet</title>
 </head>
 <body>
     <h1>Titre de niveau 1</h1>
     <h2>Titre de niveau 2</h2>
     <p>Le contenu du premier paragraphe</p>
     <p>Le contenu du deuxième paragraphe<strong>gras</strong> <em> italique</em><em><strong>italique gras</strong></em> </p>
     <hr width="50%">
     <IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
     <UL>
        <LI><A HREF="gravure.html" TITLE="vers mon travail de gravure"  TARGET="_blank">Gravure</a></LI>
       <LI><A HREF="photo.html" TITLE="vers mon travail de photo" TARGET="_blank">photo</a></LI>
       <LI><A HREF="peinture.html" TITLE="vers mon travail de peinture" TARGET="_blank">peinture</a></LI>
     </UL>
 </body>
 </html>

Travail:
Créer une page de menu qui mène vers vos 3 différents sites. Utiliser évidemment des adresses absolue. La mettre en ligne sur Netlify.

Cours 5 du 5/6 mars 2020

HTML/CSS
Visual Studio Code: Emmet et autocomplétion des balises.
http://www.csszengarden.com/
Police: un tuto.
Google Font
Réaliser une navigation avec les balises HTML de liste: <OL><UL><LI>

Les balises sémantiques HTML 5 pour structurer le contenu:
une explication claire en français sur OpenClassRooms.

Balises <div> et <span>, les « balises universelles ».

<body> 
<div class="contener">
    <header>entete</header>
    <nav>navigation</nav>
    <section>
       <article>contenu</article>
       <aside>encart</aside>
       <aside>encart</aside>
       <aside>encart</aside>
    </section>
    <footer>pied de page</footer>
 </div>
</body>

Anatomie d’une règle CSS.

La feuille de style

h1
{
    color: maroon;
}

p
{
    color: rgb(240,96,204);
}
body
{
    background-color: black; /* Le fond de la page sera noir */
    color: white; /* Le texte de la page sera blanc */
}

body
{
    background-image: url("soleil.png");
    background-attachment: fixed; /* Le fond restera fixe */
    background-repeat: no-repeat; /* Le fond ne sera pas répété */
    background-position: top right; /* Le fond sera placé en haut à droite */
}

Les couleurs en CSS/HTML.
Un outil pour tester le contraste des couleurs.

La famille de police:

   body { font-family:"times new roman", times, serif; }  body { font-family:verdana, arial, sans-serif; }

Introduction aux sélecteurs en CSS:
Sélecteurs de type (balises)

nav {
 background-color: rgb(0,180,180);
 }

Sélecteur de classe, l’attribut class

<p class="intro">
.intro {
              color: blue;
}

Sélecteur d’ID, l’attribut ID

<p id="intro">
#intro {
              color: blue;
}

Travail:

Cours 6 du 12/13 mars 2020

Je reprendrai en mode confinement à partir de ce cours au vu des nombreuses absences jeudi et vendredi (surtout).

Si vous avez des problèmes d’installation pour Visual Studio code car, par exemple votre ordinateur est trop ancien, il existe d’autres logiciels du même type. Nous avons utilisé pendant longtemps pour le cours Sublime text. Atom est très bien aussi. Ces logiciels fonctionnent tous plus ou moins de la même manière.

Exercice en classe de personnalisation d’un template HTML5.

Quelques sites proposant des templates HTMLs gratuits (sinon recherche sur template HTML5 gratuit ):

Exercice:
Téléchargez, modifiez et mettez en ligne sur Netlify le template HTML suivant : https://html5up.net/lens (pour le télécharger le bouton Download est en haut à droite).

  • Remplacez les images par les vôtres (petits formats et grands formats) et modifiez leurs légendes et descriptions.
  • Modifiez les liens vers les réseaux sociaux, supprimez celui vers Githup, activez le mail sur l’icône de l’enveloppe (cherchez sur internet « lien html mail« ).
  • Modifiez le titre et la description de la page.
  • Remplacez la police de base par une autre police de caractère.
  • Mettez le tout en ligne sur Netlify.
  • Ajouter le lien de ce nouveau site sur la page qui regroupe tout vos sites.
  • Testez sur un téléphone ou une tablette pour vous assurez que tout fonctionne.

Les vidéos explicatives de l’exercices:

  1. Vidéo 1/6: Cherchez un template HTML5 et le télécharger. 11:20
  2. Vidéo 2/6: Configuration de Visual Studio Code et installation du template. 11:57
  3. Vidéo 3/6: Analyse du fichier index.html. Remplacement/adaptation du texte. 15:57
  4. Vidéo 4/6: Remplacement des photos par vos propres images. 14:00
  5. Vidéo 5/6: Installation et remplacement de police (Google Font). 8:20
  6. Vidéo 6/6: Mise en ligne sur Netlify. 3:01

Suite à notre premier cours à distance voici quelques réponses aux questions que vous m’avez posées:

  • « J’ai laissé mes fichiers sur un ordinateur de l’école, comment les récupérer ? »
    Contactez Jean-Louis Fillon par mail jeanlouis.fillon@lacambre.be il pourra peut-être vous trouver une solution. Ne le dérangez que si vous n’avez pas trouvé d’autres solutions plus simple
  • « Mes fichiers sont sur Netlify, comment les récupérer ?
    Une vidéo qui vous l’explique. Le logiciel dont je parle en fin de vidéo est SIteSucker pour Mac.

Cours 7 du 19/20 mars + Cours 8 du 2/3 avril 2020

Tout d’abord un rappel sur la structuration de vos pages HTML indispensable avant de regarder la suite. Vidéo structuration 18 minutes. Le code de cette vidéo:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <header>le logo de mon site</header>
        <nav>
            <ul>
                <li><a href="travaux.html">Travaux</a></li>
                <li><a href="expositions.html">Expositions</a></li>
                <li><a href="biographie.html">Biographie</a></li>
            </ul>
        </nav>
        <section>
            <article>
                <h1>le titre du premier article</h1>
                <h2>sous titre</h2>
                <p>Lorem ipsum dolor sit amet, <em> consectetur</em> adipiscing elit. <strong> Nullam</strong> rhoncus nisl lorem, at mollis enim condimentum et. Duis posuere id tortor in pellentesque. <em><strong>Vivamus</strong></em>  imperdiet, lorem porta dictum dignissim, eros lorem tempor eros, eu pulvinar odio leo id arcu. Suspendisse id varius nibh, eget cursus turpis.</p>
                <h2>sous titre</h2>
                <p class="para2"> Nunc lobortis consequat diam et molestie. Aenean tempor sagittis tortor ut luctus. Sed quis eleifend sem. Donec ultricies ullamcorper turpis ac hendrerit. Maecenas molestie quam at pharetra dictum.</p>
            </article>
        </section>
        <footer>
            <a href="mailto:web@monsite.be">le mail du webmaster</a>
        </footer>
    </div>
</body>
</html>

Les sélecteurs:

  • Vidéo préparation du fichier HTML de l’exercice. 14:06
  • Vidéo les sélecteurs. 17:11
  • Vidéo les pseudo-classes. 11:18

Les balises de type block et inline, le modèle de boîte:

header, nav, section, footer {
    background-color: rgb(200, 200, 200);
    width: 400px;
    padding: 10px 10px 10px 30px;
    margin: 10px;
    border: solid 2px red;
}
body {
    margin: 0;
}
strong {
    background-color: gold;
    border: solid 1px black;
    line-height: 2em;
}

Cours 9 du 23/24 avril 2020

Création de menu horizontal ou vertical:

Positionnement avec Bootstrap:

  • Video 50:00 (ne regarder que les 15 premières minutes): Les bases de Bootstrap. Vidéo qui vous fera gagner des heures (des jours) pour le positionnement en css, solution simple, responsive et évolutive. Attention, on m’a signalé (merci) que cette vidéo avait un problème. Les 15 premières minutes sont bien mais à partir du moment où je commence à expliquer le téléchargement de Bootstrap l’image se bloque. J’ai donc recommencé cette partie. Voici donc la suite: vidéo 40:00.
  • Grille de mise en page: principe et utilisation.
  • Où le télécharger ? Getbootstrap.
  • Starter template.
  • Layout container.
  • Layout grid.
  • Pour aller plus loin avec bootstrap, responsive et bar de menu. Vidéo 11:00.

Code HTML et CSS pour les 2 exercices:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <header class="col-12">le logo de mon site</header>
        </div>
        <div class="row">
            <nav class="col-4">
                <ul>
                 <li><a href="travaux.html">Travaux</a></li>
                 <li><a href="expositions.html">Expositions</a></li>
                 <li><a href="biographie.html">Biographie</a></li>
              </ul>
            </nav>
            <section class="col-8">
                <article class="prems">
                <h1>le titre du premier article</h1>
                <h2>sous titre</h2>
                <p>Lorem ipsum dolor sit amet, <em> consectetur</em> adipiscing elit. <strong> Nullam</strong> rhoncus nisl lorem, at mollis enim condimentum et. Duis posuere id tortor in pellentesque. <em><strong>Vivamus</strong></em>  imperdiet, lorem porta dictum dignissim, eros lorem tempor eros, eu pulvinar odio leo id arcu. Suspendisse id varius nibh, eget cursus turpis.</p>
                <h2>sous titre</h2>
                <p class="para2"> Nunc lobortis consequat diam et molestie. Aenean tempor sagittis tortor ut luctus. Sed quis eleifend sem. Donec ultricies ullamcorper turpis ac hendrerit. Maecenas molestie quam at pharetra dictum.</p>
                </article>
            </section>
        </div>
        <div class="row">
            <footer class="col-12">
             <a href="mailto:web@monsite.be">le mail du webmaster</a>
            </footer>
        </div>
    </div>
 <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

CSS:

header, nav, section, footer {
    background-color: rgb(200, 200, 200);
    border: solid 2px red;
}
body {
    margin: 0;
}
strong {
    background-color: gold;
    border: solid 1px black;
    line-height: 2em;
}
.prems {
    color: red;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: tomato;
}

nav a {
    padding: 1em;
    display: block;
    text-align: center;
    text-decoration: none;
}

nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav a:hover {
    background-color: rgb(244, 193, 27);
}

Cours 10 du 30 avril 2020

Pas de nouvelle matière. Réponse aux questions.