Ressources du cours Web 2.0 2015

Publié le par

Ce cours s’adresse aux étudiants des options gravure, photographie, peinture, dessin, céramique, sculpture, espace urbain qui ont cours avec Serge. Pour les étudiants ayant cours avec Alexandre l’adresse de leur wiki est la suivante: http://an.stdin.fr/index.php/Accueil
Pour ceux ayant cours avec Boris: http://wiki.rorsvort.com/. 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 5/6 février 2015

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 est né Internet et où ?
  • Quand est né le Web et où ?
  • 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 du Zéro. Les balises vues: <HTML> <HEAD><TITLE><BODY> <H1><H2><H3><P><HR>.

Art:
Un artiste utilisant en 1994 ces bases: Heat Bunting, CV et projets, my first web page, Phone In (@king X)

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 12/13 février 2015.

Cours 2 du 12/13 février 2015

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

Deux sites mettant en avant les noms de domaines:
Heat Bunting: http://www.irational.org/heath/_readme.html.
Alexei Shulgin: http://basis.desk.nl/~you/linkx/.

Culturel:
Infrastructure technique d’Internet.
Routeur.
Traceroute.
Un traceroute (payant) sur macosx: Vtrace.
Adressage sur Internet, adresse IP, domaine.
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).
Vocabulaire (hébergement, hosting)
Comment en trouver ? rechercher sur Google : free hosting, hébergement gratuit.
La réservation d’un hébergement.

Hébergeurs:

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 000webhost, Hostinger ou autres. Mise en ligne d’une page HTML (une recette, un procédé, un processus, un mode d’emploi…). Mettre le lien sur votre blog. Exercice à réaliser pour la semaine suivante.

Cours 3 du 19/20 février 2015

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>
<P></P>
<H2></H2>
<P></P>
<HR>
<IMG SRC= »ordi.gif » WIDTH=40 HEIGHT=30 ALT= »Mon ordinateur »>
</BODY>
</HTML>

Exercice: Mise à jour de la page HTML déjà mise en ligne précédemment en tenant compte des nouvelles notions apprises au cours. Elle doit donc contenir, un titre (H1), un sous titre (H2), un paragraphe (P), un ou plusieurs mots « renforcés » (STRONG et EM), une ou plusieurs images (IMG).
Le lien reste le même, il s’agit de la même page, donc pas besoin de le republier sur votre blog. Exercice à réaliser pour la semaine suivante.

Cours 4 du 26/27 février 2015

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

Pas d’exercice.

Cours 5 du 5/6 mars 2015

Découverte de deux nouveaux langages, le Javascript et les CSS.

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.

CSS:
Champs d’application et différence avec le HTML.
CSS Zen Garden.
Changement de logiciel, passage à Sublime text.

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 19/20 mars 2015

Netart:
Transnumériques awards consacré au gif animé.
Monétiser le netart:

HTML/CSS:

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

Le HTML 5 et ses balises spécifiques:
Doctype: <!DOCTYPE html>
La langue: <html lang= »fr »>
Les caractères accentués: <meta charset= »UTF-8″>
La famille de police:
body { font-family: »times new roman », times, serif; }
body { font-family:verdana, arial, sans-serif; }
Les googlefonts

Exercice: Compléter votre mini-site de trois pages avec les balises vues au cours.

Cours 7 du 26/27 mars 2015

Transférer des fichiers par FTP (avec Filezilla et un navigateur).

Les fichier de travail sont à télécharger à cette adresse: http://lacambre2013.site50.net/Archive.zip

 HTML5/CSS3:

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>

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

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

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 2/3 avril 2015

Présentation du travail finale. Briefing, exemples…

Cheatcheet HTML5 et CSS3

Anatomie d’une règle CSS.

Le modèle de boite

Le positionnement