Ressources du cours Web 2016

Publié le par

Ce cours s’adresse aux étudiants des options gravure, photographie, 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. Les trois 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. 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 4/5 février 2016

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

Art:
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.

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.

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 11/12 février 2016.

Cours 2 du 11/12 février 2016

Expo:
Londre: Electronic Superhighway (2016-1966) à la Whitechapel gallery.
Amsterdam: Seth Siegelaub: beyond conceptual art au Stedelijk museum.
Poitier: Réseaux sociaux et identités numériques à la chapelles des Augustins. Exposition imaginée par Thomas Cheneseau.
Berlin: le festival Transmediale.
Paris: Mécatronic de Zaven Paré au centre des arts d’Enghien-les-Bains.
Bruxelles: art cinétique à la patinoire royale.
Greg Ito.

Art:
http://wwwwwwwww.jodi.org/ du collectif Jodi.
Ascii Art.

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

HTML: Les bases du HTML sur le site OpenClassrooms. Suite des balises (les nouvelles en gras):

<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY>
 <H1></H1>
 <H2></H2>
 <H3></H3>
 <H4></H4>
 <H5></H5>
 <H6></H6>
 <P></P>
 <BR>
 <HR width="50%">
 </BODY>
 </HTML>

Pas d’exercice cette fois

 

Cours 3 du 18/19 février 2016

Culturel:
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.

HTML:
Autoformation en HTML sur Openclassrooms en français, anglais et espagnol.
Memento des balises HTML.
HTML5 cheat sheet. (aide mémoire HTML5)
Changement de logiciel, passage à Sublime text.

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 4 du 25/26 février 2016

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

FTP:

HTML:
Changement de logiciel, passage à Sublime text.
Les bases du HTML sur le site OpenClassrooms. Suite des balises (les nouvelles en gras):
Les images. Lien relatif/lien absolu.  URL.

<HTML>
 <HEAD>
 <TITLE></TITLE>
 </HEAD>
 <BODY>
 <H1></H1>
 <H2></H2>
 <P></P>
 <H2></H2>
  <P></P>
 <HR>
 <IMG SRC="ordi.gif" WIDTH=40 HEIGHT=30 ALT="Mon ordinateur">
 </BODY>
 </HTML>

Cours 5 du 3/4 mars 2016

Art:
Summer de Olia Lialina.
My boyfriend came back from the war de Olia Lialina. Et la page de remix.
Ou voir du netart ? Spamm.

HTML:
Le doctype, la langue, le charset, les listes, les liens.

<!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">
<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é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 6 du 10/11 mars 2016

Art:
241543903
241543903; THE STORY BEHIND THE CRAZE
1:22 eyes closed.

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

<!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 24/25 mars 2016

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

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

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 14/15 avril 2016

Expo:
Festival Exit 2016 Perception à la Maison des arts de Créteil.
La Villette 100% expo.
104
Hémisphère au CDA d’Enghien-les-bains
Drawing after digital à XPO studio
antiAtlas des frontières, coder et décoder la frontière

HTML/CSS:
Structurer sa page.
Le modèle des boites.

Le positionnement CSS :

La balise DIV
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

 

Cours 9 du 21/22 avril 2016

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

HTML/CSS
Le positionnement CSS :
La balise DIV

Le positionnement en CSS classique:
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

Le positionnement en CSS avec un frameworks CSS:
Quelques frameworks.
Grille de mise en page: exemple.
Bootstrap:

Animation CSS:
CSSanimate.

Cours 10 du 28/29 avril 2016

ART
Rosa Menkman, Glitch studies Manifesto.

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

Javascript:
A travers le site the future de Davide Balula. Comment récupérer le Javascript ? Où l’installer dans une page HTML ? Un site pour récupérer des codes Javascript: http://www.javascriptkit.com.
Fabriquer un équivalent web de Cent mille milliards de poèmes de Raymond Queneau avec cette technique.

Cours 11 du 12 mai/6 mai 2016

Art:

Expo/festival:
Les bains numériques à Enghien les bains du 1 au 5 juin 2016.
Connected à la centrale for contemporary art à Bruxelles

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…

Travail:
Installer un WordPress dans un sous dossier sur son hébergement Hostinger.

Cours 12 du 13 mai 2016

Questions/réponses sur le HTML/CSS

Lecture des premières idées pour le travail de fin d’années

Quelques solutions techniques:
Les CSS et la 3D.
Quelques autres solutions graphiques accessibles.
Une barre de navigation en CSS3 et HTML5.
The 13 Best Yahoo Pipes Alternatives.
A hole in space. Le premier chat vidéo, entre LA et NY. 1980.
Objets connectés, little ombrella et Pegman vaudou de Julien Levesque.
Machine à sous/bandit manchot en Javascript: jSlots is 2k of jQuery slot machine magic. It turns any list (<ol> or <ul>) into a slot machine!
Une autre slot machine en HTML/CSS/javascript et php.
Génération de phrases aléatoires, random sentence in javascript.
Eliza, premier bot de conversation, un exemple en ligne.
Christophe Bruno et son Google adwords happening.
Changer le curseur en CSS.
Création de datamoshing ou de glitch.

Les QRcode: