Ressources du cours Web 2011

Cette page a pour but de vous donner 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.

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

  • Réponses aux questions par rapport à l’exercice donné au cours précédent
  • Apprentissage technique (HTML, Bluegriffon, indexhibit…)
  • 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 19/09/2011

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

Qui ne possède pas de téléphone portable ?
Qui n’a pas d’adresse mail ?
Qui utilise un webmail ?
Qui ne se souvient pas de son premier contact avec Internet ?
Qui a déjà créé un site internet ?
Qui a créé une page Myspace et qui continue à la mettre à jour ?
Qui est sur Facebook ? (Combien d’amis ? Qui joue a Farmville ?)
Qui utilise Flikr pour partager des photos ?
Qui a déjà exposé son travail ? Qui a déjà exposé sur Internet ?
Qui utilise les flux RSS ?
Qui utilise son vrai nom sur Internet ?
Qui possède ou a possédé un blog, un Skyblog ?
Qui utilise Wikipedia ?
Qui a déjà réalisé une modification sur Wikipedia ?
Qui a une connexion internet sur son téléphone portable ?
Qui utilise Foursquare ?
Qui utilise Twitter ?

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« .

Les bases du HTML sur le site du Zéro. Les balises vues: <HTML> <HEAD><TITLE><BODY>.

Histoire de Wikipedia. Le New York Times Spécial édition. Le cas Philippe Manoeuvre. La fausse citation de Maurice Jarre.

Le mode de fonctionnement de wikipedia inspire le site scientists of america.

Wikipedia Art, a collaborative performance and public intervention.

L’article du site du centre Pompidou sur l’art conceptuel.

L’exercice: Réaliser un changement, une modification, une amélioration, un ajout au site Wikipedia (http://www.wikipedia.org/). M’envoyer par mail une copie d’écran avant et après modification. Expliquer dans le mail la modification et donner l’URL de la page. A réaliser avant le cours du 26 septembre.

Cours 2 du 26/9/2011

A partir des mails reçus, une première approche des formats de fichier destinés au Web, GIF, JPEG, PNG (burn all GIFs) et remise dans leur contexte d’autres formats HTML, Webarchive, PSD, TIFF, ZIP.

Un site référence en français sur le mail: Arobase.org.

Spam Conférence / Performance (40’) de Valérie Cordy et Guillaume Istace au Jacques Franck à St Gilles le 30/09/2011 à 20. La vidéo des Monty python à l’origine du terme.

HTML la suite.

Les artistes:

Heat Bunting, my first web page.

Jodi, pas de site, leur page d’entrée c’est la page qui leur est consacrée sur Wikipedia: http://wwwwwwwww.jodi.org/

Heat Bunting: Kings XPhone in, le rapport.

L’exercice:
Le blog sur blogger.

Cours 3 du 3/10/2011

Hébergement, définition, historique, Recherche (Free hosting),
Proposition pour un hébergeur gratuit (en anglais) : http://www.zymic.com/

Le FTP
Filezilla
, un logiciel libre multi plateforme de transfert FTP.

Les artistes et le transfert de fichiers:

To ftp is to live
http://art.net/~marcus/read.htm

http://www.art.net/help/ftpaccess.html

Alexei Shulgin
Hot Pictures
http://sunsite.cs.msu.su/wwwart/hotpics/

http://deaddrops.com/ de Aram Barthol (http://datenform.de/indexeng.html)
« Un-cloud your files in cement! ‘Dead Drops’ is an anonymous, offline, peer to peer file-sharing network in public space. »

http://hootsuite.com//

L’exercice: La mise en ligne d’une page HTML.

Cours 4 du 10/10/2011

HTML: La balise lien <A>, lien absolu et lien relatif. La page qui lui est consacrée sur le site du Zéro.

Les artistes et les liens:

Deux sites de 1996 mettant en avant les liens:

 

Exercice : Mise en ligne de trois pages interconnectées chez Zimic, en plus de celle déjà existante. Mise sur le blog du lien vers une de ces trois pages.

Cours 5 du 17/10/2011

HTML: la balise image <IMG>. La page qui lui est consacrée sur le site du Zéro.
Le codage de la couleur. Les caractères spéciaux, accentués…

L’influence du Net sur la photo:

L’expo des rencontres de Arles 2011: From Here On
Le site d’un des artistes exposés travaillant à partir de Google Street View, Jonathan Rafman et des images d’un exposition.

Exercice: Partir en reportage photo sur Google Street View avec comme thématique « frontière ». Sélectionner 4 images cohérentes et les mettre en ligne sur une nouvelle page HTML chez Zimic. Mettre sur votre blog l’adresse de cette page. Inspiration pour se travail.

Cours 6 du 24/10/2011

http://www.streetwithaview.com/

http://chicagoteleporter.info/

http://www.americansuburb.com/

Arenae

http://www.internetlandscape.it/

http://www.scoop.it/t/art-en-reseau

http://videogramo.8bitpeoples.com/

http://www.flickr.com/search/?q=google+street+view&f=hp#page=0

GIF, JPEG, PNG, Burn all GIFs

http://www.google.com/analytics/

Le site de La Cambre hacké…

Exercice: Installer google analytics sur chacune des pages HTML chez Zymic.

Cours 7 du 31/10/2011

Interface-Z

Isadora

Cours 8 du 14/11/2011

Listening Post by Mark Hansen and Ben Rubin

Elie Commins, metteur en scène de Breaking et de Writing spaces.

Twitter

Digitalarti

Albertine meunier, Etre aux anges, la boite à musique connectée à Twitter.

Racourcisseur d’URL: Tinyurl

Chatroulette.

L’éditeur de page Web: BlueGriffon. Logiciels libres.

Five Essential HTML5 Editors, un article en anglais de Scott Clark sur HTML Goodies.

Trois sites de netart basés sur le monochrome: Bluemonochrome, Purpul et Tweeting colors

Exercice: Ouvrir un compte Flickr et y déposer les images de votre reportage sur Google Street View.

Cours 9 du 21/11/2011

Flickr

archive.org

Les outils de recherche, moteurs et annuaire (l’évolution du premier, yahoo).

6 Milliards de photos au total. 1 millions téléchargées par jour (?). Photography in Abundance, un travail d’Erik Kessels.

Le FAQ officiel de Flickr consacré au diaporama.

Mots clefs et nuage de mots clefs.

N’oubliez plus jamais vos mots de passe : une méthode simple, un article de 2011 sur de Presse citron.

Création de GIFs animés:

Tuto pour Photoshop CS4,

Tuto pour Gimp en français, a tutorial on how to make some basic GIF images with GIMP

Un autre, excellent et complet tuto pour Gimp sur le site abc dugimp.

Animated Gif As Art, le GIF animé comme médium artistique:

Exercices:

  1. Créer un GIF animé dans l’esprit AGAA. Le mettre en ligne sur votre site chez Zimic. Mettre le lien sur votre blog.
  2. Créer une page HTML qui contiendra le diaporama Flickr de vos photos Google Street View. Mettre cette page en ligne sur zimic. Mettre le lien sur votre blog.
  3. Appliquer au moins ces deux mots clefs à vos photos sur Flickr: Google Street View et artsnum2011.
  4. Déposer vos photos Google Street View dans le groupe Flickr suivant: http://www.flickr.com/groups/1799222@N20/
    Elles apparaitront ensuite dans ce diaporama:

Cours 10 du 28/11/2011

Les QRcode:

Code barre versus QRcode.
La page Wikipedia
sur les QRcode, contenant un paragraphe consacré à l’appropriation par les artistes des QRcode.
Guide pratique du QRCode
, un article pour débuter sur le site olybop.info.

Comment configurer votre mobile ? un article du site QRcode.fr.

Décodeur en ligne : ZXing Decoder Online.

Un (des nombreux) générateur de QRcode: QR Code Generator from the ZXing Project.

QR hacker et le générateur de Unitag permettent de personnaliser les QRcode. Un plus simple: qr-designer. Mais jusqu’où aller dans la personnalisation ? Un article en anglais fait le point: Cracking the QR Code.

Besoin d’URL courte ? Plusieurs sites proposent ce service dont: http://goo.gl/.

Bluegriffon:

Utilisation de l’item fichier/création assistée d’un nouveau document.
Création de trois pages interconnectées.
En vue de l’intégration de Lightbox.

Culture et inspiration:

« « Paris, Désordres Publics » est un projet de Street Art basé sur la technologie des QR Codes.
À travers 20 céramiques disséminées dans la capitale, le collectif Raspouteam dont fait partie cosmografik vous propose un panorama des désordres qui ont agité Paris à différentes époques : la Commune, l’Exposition Coloniale, Mai ‘68… tous ces événements marquants, qui ont fait de Paris la ville qu’elle est devenue, devraient être inscrits dans la mémoire urbaine. »

Le web doc Prison Valley.

QRart, un scoop.it consacré aux QRcode en tant que médium artistique.

QR_HOBO_CODES, a series of one hundred QR stencil designs which, covertly marked in urban spaces, may be used to warn people about danger or clue them into good situations.

Lors de l’exposition « pioneers of electronic art » présentée à Ars Electronica en 1992, un des catalogues utilisait les codes barre. Plus d’explication sur cette page.

Exercice: Réaliser un QR code personnalisé qui mène vers une page internet qui contient votre GIF animé. Poster ce QRcode sur votre blog.

Cours 11 du 5/12/2011

Révision rapide de Bluegriffon
Intégration de Lightbox.

Quelques autres « carousel d’images » basé sur les même technique d’intégration que Lightbox: 20 popular and free jquery content and image sliders from 2011.

Exercice: Intégrer lightbox 2 pour un set de 4 images dans une page HTML à mettre en ligne. Mettre le lien vers cette page sur votre blog.

Cours 12 du 12/12/2011


Afficher GeoNetArt2011 sur une carte plus grande

Exercice: Postez sur votre blog la description du travail que vous comptez réaliser pour le travail de ce quadrimestre GeoNetArt.

 

Cours 13 du 19/12/2011

Jodi GEOGOO travail présenté à Imal.

Indexhibit

Le site du CMS Indexhibit.

Pimp my Indexhibit est un blog en français expliquant entre autre comment modifier le design d’Indexhibit et comment l’installer.

20 great artist portfolios built with indexhibit, article en anglais du  site Unstage qui liste 20 portfolio réalisé avec Indexhibit.

Google Analytics: How to Get Started/Indexhibit Install, article en anglais expliquant comment installer google Analytics dans un site utilisant Indexhibit. D’autre bon tuto sur ce site.

weebly