Ressource du cours web 2019

Publié le par

Ce cours s’adresse aux étudiants des options peinture, dessin, céramique, reliure, sculpture, qui ont cours avec Serge.
Pour les étudiants ayant cours avec Etienne, consultez cette page ou celles des autres professeurs.
Pour ceux ayant cours avec Boris: https://lacensav.github.io/cours_web_2e/
Et enfin, ceux ayant cours avec Nicolas, ils pourront trouver leurs références en suivant https://b2.artsnum.be.
Les trois sites 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 7/8 février 2019

« Couverture » du cours:
Tattoo on sunset

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

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é? Avec quel objectif ?
  • 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.

Expérimenter le web de 1990 dans on navigateur: https://worldwideweb.cern.ch/.

Technique:
HTML: Les bases du HTML sur le site francophone openclassrooms.
Le traitement de texte spécialisé pour le HTML: https://www.sublimetext.com/
Les balises vues:

<!DOCTYPE html>
<html>
<head>
<title>Contenu de l'onglet</title>
</head>
<body>

Contenu de la page.

</body>
</html>

Cours 2 du 14/15 février 2019

Art:
Rafael Rozendael.

Techno:
HTML:
Le doctype, la langue, le charset, titres de niveau 1à 6, paragraphe, gras et italique, retour à la ligne, ligne de séparation, les images, les attributs, le principe de la page index.html.

<!doctype html>
<HTML lang="FR">
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<TITLE></TITLE>
</HEAD>
<BODY>
<H1></H1>
<H2></H2>
<P></P>
<H2></H2>
<P>
<EM></EM>
<STRONG></STRONG>
<BR>
</P>
</BODY>
</HTML>

Hébergement chez Netlify.

Exercice:

Cours 3 du 21/22 février 2019

Cours 4 du 28 février/1 mars 2019

Exercice pour la semaine suivante:
Créez un site web d’artiste (au choix) d’au moins 4 pages, liées entre elles par un menu de navigation, par exemple, une page d’accueil (index.html), une page de biographie, de travaux, de contact.
Les mettre en lignes sur Netlify. M’envoyer le lien par mail (ainsi que les liens des deux exercices précédents)pour la veille du prochain cours, le 6 ou le 7 mars en fonction de votre cours.
Au total vos pages doivent comporter, au minimum, les balises suivantes (sans compter le contenu de HEAD):

  • Un titre.
  • Un sous-titre.
  • Un menu avec au moins quatre liens (vers vos quatre pages). Fabriqué avec une liste.
  • Liens absolus et liens relatifs.
  • Paragraphes.
  • Images.
  • Strong, em (gras, italique).
  • Lien mail et téléphone (sur la page contact). Non vu en classe, à vous de trouver comment le réaliser.
    Le lien « mail » de la page contact doit pointer vers une adresse email. Le téléphone vers un numéro de téléphone.
  • 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).
  • Une seule feuille de style externe pour le design du site (style.css). Donner un style au moins aux balises suivantes: BODY, P, H1, H2, LI, STRONG, EM

Pour un cours progressif et organiser je vous conseil Openclassroom.

Pour aller plus loin en CSS: essayer la cheat Sheet CSS.

Cours 5 du 7/8 mars 2019

Journée d’étude

Cours 6 du 14/15 mars 2019

Techno:
HTML&CSS:

Exercice pour la semaine suivante:

Modifiez l’apparence de la page CSS Zen Garden (version anglaise, version française) en stylant au moins 5 éléments de votre choix.
Récupérez le code de CSS Zen Garden, le coller dans un nouveau document Sublimetext et enregistrez votre nouveau document index.html dans un nouveau dossier.
Dans sublime text, créez une feuille de style CSS externe et sauvez la dans votre nouveau dossier.
Liez le document HTML à cette feuille de style.
Modifiez son apparence en stylant au moins 5 éléments de votre choix
Faites quelques essais en utilisant éventuellement les classes déjà présentes dans ce document (ou créez vos propres classes)
Mettre en ligne sur Netlify.
M’envoyer un mail avant le prochain cours avec les URL de tous vos travaux. A ce jour 5 URL.
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).

Cours 7 du 28/29 mars 2019

CSS, le résumé structuré.

Cours 8 du 4/5 avril 2019

Le positionnement CSS avec Bootstrap.

Le html de base:

<div class="container">

<header>entête</header>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</nav>

<article>contenu</article>
<article>contenu</article>
<article>contenu</article>

<footer class="col-md-12">pied de page</footer>


</div>

Le html de base modifié pour Bootstrap:

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Révolution néolithique</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <div class="container">

      <div class="row">
        <header class="col-md-12">entête</header>
      </div>

      <div class="row">
        <nav class="col-md-12"><ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul></nav>
</div>
      <div class="row">
        <article class="col-md-4">contenu</article>
        <article class="col-md-4">contenu</article>
        <article class="col-md-4 element-animation">contenu</article>
      </div>

      <div class="row">
        <footer class="col-md-12">pied de page</footer>
      </div>

  </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

La feuille de style perso:

header, nav, article, footer {
background-color: rgb(220,220,220);
border: 2px solid black;
border-radius: 6px;
text-align: center;

}

Animation:

http://cssanimate.com/

Cours 9 du 25/26 avril 2019

Typographie

Cours 10 du 2/3 mai 2019

Objectifs:

  • Réserver un hébergement chez un hébergeur gratuit.
  • Y transférer des fichiers en utilisant un logiciel FTP, Filezilla.
  • Installer WordPress.

Nicolas a documenté l’ensemble du processus en 4 vidéos:

Cours 11 du 9/10 mai 2019

Installation de WordPress.

Cours 12 du 16/17 mai 2019

Configurer WordPress

Menu: