Ressources du cours Web 2018

Publié le par

Ce cours s’adresse aux étudiants des options  peinture, dessin, céramique, sculpture, qui ont cours avec Serge.
Pour les étudiants ayant cours avec Etienne, consultez cette page ou celles des autres professeurs.
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://nbieva.gitbooks.io/web/ .
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 8/9 février 2018

« Couverture » du cours:
Tattoo on sunset

Art:
Jan Robert Leegte, Scrollbar composition, 2000
www.scrollbarcomposition.com
collection Stedelijk Museum Amsterdam / MOTI

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é?
  • 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.

La page Wikipedia consacrée au Web 2.0. L’article fondateur de septembre 2005 de Tim O’Reilly traduit en français: « Qu’est ce que le Web 2.0« . Et cinq ans plus tard, du même, un article qui fait le point sur l’évolution:  » Le Web à la puissance 2 : le Web 2.0 cinq ans plus tard« .

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

<HTML> <HEAD><TITLE><BODY>.

Exercice: Réaliser un changement, une modification, une amélioration, un ajout au site Wikipedia (http://www.wikipedia.org/). Poster sur son blog une copie d’écran avant et une copie d’écran après modification. Expliquer dans le même post la modification et donner l’URL de la page. A réaliser avant le cours du 9/10 février 2017.

Cours 2 du 15/16 février 2018

Intro:
Wikipedia Recent Changes Map

Le contexte de l’exercice précédent:
Histoire de Wikipedia. Le New York Times Spécial édition. Le cas Philippe Manoeuvre. La fausse citation de Maurice Jarre.
« Pourquoi j’ai créé un canular sur wikipedia ? »Article de Pierre Bartelemy

Les adresses IP.
Internet archive: https://archive.org/

Techno:
Expérimenter en ligne le HTML, les css: https://jsbin.com/
 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">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1></H1>
<H2></H2>
<P></P>
<H2></H2>
<P>
<EM></EM>
<STRONG></STRONG>
<BR>
</P>
<HR width="50%">
<IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
</BODY>
</HTML>

Exercice: Création d’un mini site internet de  3/4 pages (pas encore interconnectées entre elles).

Cours 3 du 22/23 février 2018

Art:
Summer de Olia Lialina.
My boyfriend came back from the war de Olia Lialina. Et la page de remix.

Où voir du Net Art ? Spamm.

Culturel:
Infrastructure technique d’Internet.
Routeur.
Traceroute.
Un traceroute (payant) sur macosx: Vtrace.

Adresse IP/ Nom de domaine.

Hébergeurs:
Histoire de l’hébergement et son évolution du gratuit au payant, histoire de altern.org et de Valentin Lacambre (une figure héroïque)
http://altern.org/alternb/defense/
http://altern.org/alternb/ideo.html

Quelques hébergeurs gratuits:

FTP:

  • La page à propos du FTP sur wikipedia
  • Filezilla, un logiciel libre multi plateforme de transfert FTP.

HTML:
Les liens absolus/relatifs.

Exercice: Réservation d’un hébergement gratuit et donc d’un sous domaine sur 000webhost,  ou autres. Y héberger une première page.
Mettre le lien sur votre blog. Exercice à réaliser pour la semaine suivante.

Cours 4 du 1/2 mars 2018

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

<!doctype html>
<HTML lang="FR">
<HEAD>
<meta charset="UTF-8">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1></H1>
<H2></H2>
<P>Lorem <strong>ipsum</strong> dolor <em>sit</em> amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</P>
<H2></H2>
<P></P>
<HR>
<IMG SRC="ordi.gif" 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>

Exercice clôturant la partie HTML:

  1. Créez un site web d’artiste (au choix) de 4 pages, liées entre elles par un menu de navigation. Vos fichiers HTML doivent être liés à une feuille de style (CSS, basique) comme expliqué au cours.  Vos pages doivent être au plus proche du modèle (voir les captures plus bas). A vous de trouver les éléments HTML correspondants. Au total vos pages doivent comporter, au minimum, les balises suivantes (sans compter le contenu de HEAD):

    • Un titre
    • Un sous-titre
    • Un menu avec au moins quatre liens (vers vos quatre pages)
    • Liens absolus et liens relatifs
    • Paragraphe(s)
    • Listes
    • Images
    • Strong, em
    • Citation
    • Tableau
    • Lien mail et téléphone

    Pour les balises non-vues au cours référez-vous à un Memento des balises HTML ou à un(e) HTML5 cheat sheet (aide mémoire HTML5).

  2. Le lien « mail » de la page contact doit pointer vers une adresse email. Le téléphone vers un numéro de téléphone.

  3. Le tout doit être transféré via FTP sur votre serveur et accessible via une adresse de type:
    votrenomdutilisateur.000webhostapp.com/recap
    En mettre le lien vers la première page sur votre blog.

 

Cours 5 du 8/9 Mars 2018

Art:
Intervention d’Emmanuel Guez. Il est artiste, philosophe des média, commissaire d’exposition  et enseignant à l’ESA Avignon où il co-dirige le PAMAL (Preservation & Art – Media Archaeology Lab), fondé en 2013.

HTML/CSS:
Champs d’application et différence avec le HTML.
CSS Zen Garden.
Cheat sheet CSS
Utilisation de l’inspecteur dans Firefox. Un tutorial simple.

Réaliser une navigation avec les balises HTML de liste: <OL><UL><LI>

<!doctype html>
<HTML lang="FR">
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>titre niveau 1</H1>
<H2>titre niveau 2</H2>
<P>paragraphe</P>
<H2>titre niveau 2</H2>
<P>paragraphe</P>
<HR width="50%">
<IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
<UL>
<LI><A HREF="montravail.html" TITLE="vers mon travail de gravure" TARGET="_blank">Gravure</a></LI>
<LI><A HREF="montravail.html" TITLE="vers mon travail de gravure" TARGET="_blank">Gravure</a></LI>
</UL>
<A HREF="montravail.html" TITLE="vers mon travail de gravure" TARGET="_blank">Gravure</a>
</BODY>
</HTML>

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.

Cours 6 du 22/23 mars 2018

Art:
Exposition « OFFLINE ART: new2 » de Aram Bartholl à XPO gallery.
Piratebox.
Librarybox.
10 mythes à propos du net-art un article en Anglais de 2002 de Jon Ippolito.

HTML/CSS:
Champs d’application et différence avec le HTML.
CSS Zen Garden.
Cheat sheet CSSLes 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; }

Les googlefonts

Réaliser une navigation avec les balises HTML de liste: <OL><UL><LI>

Les balises sémantiques HTML 5 pour organiser le contenu:

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.

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;
}

Le modèle des boites.

Balise inline et block.
Unités en CSS:

  • Unités physiques: cm, mm, pt…
  • Unités liées à l’écran: px
  • Unités relatives: %, em…

Astuce pour centrer toute une page dans la fenêtre du navigateur:

.contener {
 background-color: rgb(180,180,180);
 width: 40em;
 margin-right: auto;
 margin-left: auto;
 }

Exercice: Compléter votre site de quatre pages avec les balises et règles vues au cours.

Cours 7 du 29/30 mars 2018

Culture web:

W3C son rôle: un court article sur Alsacréation. Sa mission. La page wikipedia.

Techno: Méthodologie de création d’un site web.

Le principe du contener.

Les feuilles de style de reset:

Les pseudo class sur Openclassrooms.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Joseh Kosuth le site</title>
 <link rel="stylesheet" type="text/css" href="reset.css">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contener">
 <header>le logo de John</header>
 <nav>
 <ul>
 <li><a href=""> Accueil</a></li>
 <li><a href="">Travaux</a></li>
 <li><a href="">Expositions</a></li>
 <li><a href="">Contact</a></li>
 </ul>
 </nav>
 <section>
 <h1>John doe - biographie</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
 <footer>contact vers le webmaster</footer>
</div>
</body>
</html>
body {
 background-color: rgb(230,230,230);
}

.contener {
 width: 400px;
 background-color: rgb(255,255,255);
 margin-right: auto;
 margin-left: auto;
}

header {
 background-color: rgb(150,150,100);
}
header:hover {
 background-color: rgb(255,0,0);
}

section {
 padding: 0em 1em 0em 1em;
}

footer {
 padding: 0em 1em 0em 1em;
}

a {
 color: red;
}
a:active {
 color: blue;
}
a:hover {
 color: black;
}
a:visited {
 color: yellow;
}

 

Cours 8 du 19/20 avril 2018

HTML/CSS:

Le positionnement en CSS avec un frameworks CSS:
Quelques frameworks.
Grille de mise en page: exemple.
Bootstrap: la version 4 qui inclut flexbox, en version 4.1 aujourd’hui.
Un tutoriel encore en version 3 mais utilisable pour les bases.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Joseh Kosuth le site</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
 <div class="row">
 <header class="col-12">le logo de John</header>
 </div>
 <div class="row">
 <nav class="col-3">
 <ul>
 <li><a href=""> Accueil</a></li>
 <li><a href="">Travaux</a></li>
 <li><a href="">Expositions</a></li>
 <li><a href="">Contact</a></li>
 </ul>
 </nav>
 <section class="col-9">
 <h1>John doe - biographie</h1>
 <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna <span class="aliqua"> aliqua</span>. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
 </div>
 <div class="row">
 <footer class="col-12">contact vers le webmaster</footer>
 </div>
</div>
<!-- Optional JavaScript -->
 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
 <script src="js/bootstrap.min.js"></script>
 </body>
</body>
</html>

 

Cours 9 du 26/27 avril 2018

Art

HTML/CSS:

Animation avec CSS: cssanimate,

Cours 10 du 2/3 Mai 2018

Tech:
CMS ou les systèmes de gestion de contenu.
Historique. Définition. Exemples.
Pourquoi WordPress ?
Différences entre wordpress.com et wordpress.org.
PHP et MySQL. Hébergement.
Installer WordPress.

Cours 11 du 11 Mai 2018

Art:

How your web browser affects your online reality, explained in one image.

HTML:

Rappel Bootstrap

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 <link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="container">
 <div class="row">
 <header class="col-12">
 Mon logo
 </header>
 </div>
 <div class="row">
 <nav class="col-2">
 <ul>
 <li><a href=""> Accueil</a></li>
 <li><a href="">Travaux</a></li>
 <li><a href="">Expositions</a></li>
 <li><a href="">Contact</a></li>
 </ul>
 </nav>
 <section class="col-10">
 <p>du contenu</p>
 </section>
 </div>
 <div class="row">
 <img src="une.jpg" class="col-md">
 <img src="deux.jpg" class="col-md">
 <img src="trois.jpg" class="col-md">
 
 </div>
 <div class="row">
 <footer class="col-12">
 Le pied de page avec l'adresse du webmaster
 </footer>
 </div>
</div>
</body>
</html>