Communication S4 - Séance 1 | Bootstrap- les grilles

Conception d'interface numérique et valorisation de projets

Objectifs du cours

Apprendre les savoir-faire nécessaires pour concevoir une interface numérique permettant de mettre en avant les projets réalisés par chaque étudiant tout au long de leur parcours à l'IUT et se concentrer particulièrement sur la mise en valeur d'un projet phare choisi par l'étudiant.

Plan du cours

  • Apprendre à utiliser Bootstrap (séance 1 et 2)
  • Bootstrap-suite et responsive Design (séance 3 et 4)
  • Jquery et les effets d'animation(séance 5 et 6)
  • Présentation des travaux(séance 7 et 8)

Rappel HTML/CSS

Les prescriptions initiales:

<!DOCTYPE Html>
<html>
</html>

Sémantique globale

<head>
</head>
<body>
	><header>
	</header>
	
	><nav>
	</nav>
	
	<section>
		<article>
		</article>
		<article>
		</article>
	</section>	
	
	<aside>
	</aside>
	
	<footer>
	</footer>	
</body

Le head

<head>	
   <meta charset='utf-8' />	
   <title='mon site' />	
   <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

Support de cours

Cf cours S1 document numérique avec Mario Cataldi et Jean Hugues Réty

A faire pour la séance 2

Créer un fichier qui regroupe les liens de tous les projets déjà réalisés par l'étudiant du type :

<a href='monadresse1.html'>Projet 1</a>
<a href='monadresse2.html'>Projet 2</a>
...

L'étudiant sélectionne seulement les projets qu'il veut mettre en avant.

Il établit une hiérarchie avec plusieurs niveaux et éventuellement des catégories qu'il peut ajouter en temps que "class" à ses liens.

<!--Ma première catégorie --> 
			
<a href='monadresse1.html' class='projet' >Projet 1</a>
<a href='monadresse2.html' class='jeu'>Jeu </a>
...