Ressources du cours Web 2017

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 Alexandre l’adresse de leur wiki est la suivante: http://aan.stdin.fr/index.php/Accueil
Pour ceux ayant cours avec Boris:  https://github.com/lacensav/cours_web_2e.
Et enfin, ceux ayant cours avec Nicolas pourront trouver leurs références en suivant ce lien.
Les quatres pages 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 2/3 février 2017

« Couverture » du cours:
Tattoo on sunset et Why I love making website de Rafael Rozendaal.

Art:
Heat Bunting
Jodi, wwwwwwwww.jodi.org

Art websites sales contract de Rafael Rozendaal.
Le contrat de Seth Siegelaub.
Les pierres à lait de Wolgang Laib.
The future de Davide Balula.

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

Communication

  • Qui ne possède pas de téléphone portable ? Et un smartphone connecté à Internet?
  • Qui a une connexion internet sur son téléphone portable ?
  • Qui a plusieurs adresses émail et pourquoi ?)
  • Qui utilise un « Webmail » ?
  • Qui ne se souvient pas de son premier contact avec Internet ? Vous êtes des « digital native« .
  • Qui a déjà créé un site internet ?
  • Qui a créé une page Myspace et qui continue à la mettre à jour ?
  • Qui possède ou a possédé un blog, un Skyblog ?
  • Qui est sur Facebook ? (Combien d’amis ?)

Consommation

  • Chaines youtube ? Comment regarder vous des films (streaming, torrent…? Comment s’informer, site de journaux en ligne

Gestion de son identité:

Moyen d’information

  • Qui utilise Wikipedia ?
  • Qui a déjà réalisé une modification sur Wikipedia ?
  • Qui utilise les flux RSS ?
  • Qui utilise Twitter ?

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. Les balises vues:

<HTML> <HEAD><TITLE><BODY> <H1><H2><H3><P><HR>.

Le contexte de l’exercice:
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

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 9/10 février 2017

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

FTP:

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

Exercice: Réservation d’un hébergement gratuit et donc d’un sous domaine sur Hostinger, 000webhost,  ou autres. Mise en ligne d’une page HTML « créative » utilisant les balises vues aux cours mais également des balises non vues. Mettre le lien sur votre blog. Exercice à réaliser pour la semaine suivante.

Cours 3 du 16/17 février 2017

Art:
Extrait d’une interview avec Thomas Cheneseau commissaire de l’exposition Unlike à Poitier. Compte rendu vidéo de l’exposition.

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):
Les images. Lien relatif/lien absolu.  URL.

<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY>
 <H1></H1>
 <H2></H2>
 <H3></H3>
 <H4></H4>
 <H5></H5>
 <H6></H6>
 <P></P>
 <BR>
 <HR width="50%">
<IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">

 </BODY>
 </HTML>

Pas d’exercice cette fois

Cours 4 du 23/24 février 2017

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.

HTML:
Le doctype, la langue, le charset, les liens, 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></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  trois pages interconnectées entre elles. Les mettre en lignes sur votre espace chez Webhost ou Hostinger. Garder la page précédente en ligne. Mettre le lien vers la page principale de ses trois pages sur votre blog.

Cours 5 du 2/3 mars 2017

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)
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:

Créez un site de minimum trois pages. Insérez une image provenant du web (lien absolu) et une autre que vous hébergez dans un dossier « Images » (lien relatif). Votre page doit comporter, au minimum, les balises suivantes:

  • Un titre
  • Un sous-titre
  • Un menu (liste à puces) avec au moins trois liens (vers vos trois pages)
  • Paragraphe(s)
  • Images
  • strong, em
  • Plusieurs éléments de formulaires (facultatif)
  • Un bouton (button) qui ne sert à rien (ou qui sert à quelque chose..)
  • Une citation
  • Un tableau

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).
Mettre en ligne le site (sur Hostinger). En mettre le lien vers la première page sur votre blog.

 

Cours 6 du 9/10 mars 2017

HTML/CSS:
Champs d’application et différence avec le HTML.
CSS Zen Garden.
Cheat sheet CSS

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.

La famille de police:

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

Les googlefonts

Cours 7 du 23/24 mars 2017

Art
Exposition « OFFLINE ART: new2 » de Aram Bartholl à XPO gallery.
Piratebox.
Librarybox.

HTML/CSS
http://www.csszengarden.com/
Google Font
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 mini-site de trois pages avec les balises vues au cours.

Cours 8 du 30/31 mars 2017

Travail finale
Présentation du travail finale. Briefing, exemples…

HTML/CSS:
En introduction, utilisation de l’inspecteur dans Firefox.

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…

Positionnement avec les CSS:

Ancienne méthode (que je ne montrerai pas):

Le positionnement en CSS. Une explication basée en partie sur l’histoire des logiques de positionnement depuis la fin des années 90 jusqu’à aujourd’hui. Vous pouvez retrouver une partie des logiques du cours sur ce site en anglais:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
et en français sur celui-ci:
http://deptinfo.cnam.fr/~pons/TOTO/positionement.html

Nouvelle méthode (beaucoup plus simple):

Flex:
Sur Openclassrooms le chapitre consacré a Flex. En français.
Flexbox Froggy – A game for learning CSS flexbox.

Exercice:

Le site de Nicolas qui explique l’exercice de mise en page
La page de l’exercice.

Cours 9 du 20/21 avril 2017

Art:
Top 25 Expiring Artists on the Internet Guido Segni, 2013:  A daily updated chart list of the most influential internet artists based on the expiring date of their website. Or just a representation of the state of hypercompetition and anxiety of contemporary artists inside (and outside) of the Internet.

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, encore en version alpha 6 aujourd’hui.

Animation CSS:
CSSanimate.

Cours 10 du 26/27 avril 2017

Art:

 

HTML/CSS:

Un cours en français sur OpenClassrooms pour prendre en main Bootstrap.

Cssanimate.

Des outils pour l’animation en CSS 3.

Cours 11 du 4/5 mai 2017

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

Nom de domaine. un tuto sur openclassrooms.
Quelques gros hébergeurs payants: Amen, Gandi, OVH, 1and1…