Melanie HOFF, Decodelia, Chrome extension, 2016

The single most important thing you need in order to have a career in the arts is persistence. The second most important thing you need is talent. The third most important thing is a grounding in how the online world works. Its that Important.

Cory Doctorow
from Information Doesn't Want to Be Free: Laws for the Internet Age. 2014 (in Net art && cultures)

Introduction

  • Objectifs/présentations
  • Présences, listes
  • Planning du quadrimestre
  • Modalités de rendu des exercices / Dossiers Dropbox

  • Travail de fin de quadrimestre

    --


Le premier navigateur web (1990)

Au programme

  • Internet et World Wide Web, origines
  • Navigateurs, serveurs, clients, adresse IP, nom de domaine, hébergeurs...
  • Les différents langages que nous allons aborder (HTML, CSS, PHP, javaScript, MySQL)
  • Les langages de balisage (html, wikimedia, markdown, SVG...) et autres (programmation). Aussi jSON.
  • Introduction au langage HTML (le code n'est jamais très loin...)

Nos outils

HTML: Structure et balises

  • Principes généraux du langage HTML
  • Structure générale
  • Doctype
  • Balises de 1er niveau : html, head, body et balises metas (et leur impact sur le SEO notamment)
  • Balises d'entête (title, meta, style, script..)
  • Balises de type block : header, footer, h1, h2, ... , ul, ol, li, div, p, blockquote, img, table, form, canvas..
  • Balises de type inline : span, a, strong, em
  • Balises orphelines (hr, img..)
  • Les attributs
  • Les commentaires

Listes des principales balises HTML

Gif: http://netart.rocks/notes/html

Ressources

Les artistes travaillant avec le web comme matière première s'approprient chaque nouvelle évolution technologique pour l'interroger, la détourner, la redéfinir...

Citons:

  1. les réseaux sociaux
  2. AI/Machine learning
  3. Le développement d'extensions pour les navigateurs
  4. Le hacking
  5. Les données (Big Data)
  6. La géolocalisation et les services web associés
  7. etc.

D'autres artistes, plutôt hors du champ des arts numériques à proprement parler, utilisent ces mêmes outils pour des projets spécifiques. Citons Ai WeiWei et Olafur Eliasson et leur projet Moon.

Rafael Rozendaal, Abstract browsing 17 03 06(Flickr), 2017

Ce travail de Rafael Rozendaal, une extension pour le navigateur Chrome, nous donne un indice sur la structure de cette page HTML (ici, Flickr). Nous parlerons beaucoup d'éléments HTML, souvent de blocs, imbriqués les uns dans les autres (BLOCK), ou les uns à côté des autres (INLINE).

Références

Autres ressources

Exercice 1

Créez votre première page web, avec:

  • Une structure correcte (head, body..)
  • 2 niveaux de titres (h1, h2, h3, etc.)
  • 2 paragraphes
  • 1 image
  • Modifiez le titre de la page
  • Testez
  • Apportez votre page sur une clé USB au prochain cours

Vous pouvez pour cet exercice aller chercher du code à droite à gauche, ou vous base sur le visuel ci-dessous comme minimum pour commencer, et y rajouter les éléments nécessaires.

Gif: http://netart.rocks/notes/html

  • Le réseau, l'infrastructure, c'est le café
  • L'Internet c'est la politesse (ce sont les règles, le code de la route, comme le dit Robert Cailliau)
  • L'espace disque chez l'hébergeur, ce sont les frigos (ou - Les différentes armoires et étagères du bar par exemple)
  • Le serveur c'est le bartender
  • Le navigateur c'est le client
  • Les adresses IP sont les emplacements des tables, en latitude, longitude et altitude
  • Les noms de domaines sont les numéros de tables (table 5, table 6..)
  • Lever le doigt c'est une requête
  • Une page statique, c'est un tonic
  • Une page dynamique un cocktail
  • Les données de la base, ce sont les ingrédients (gousse de vaille, glace pillée, menthe, gingembre..)
  • PHP (par exemple), la recette à suivre
  • Angular est un Américain haché minute (ou un truc flambé à table..)
  • Et l'eau du robinet est open source, bien sûr...

results matching ""

    No results matching ""