DSAA D4+ :
/Pratiques numériques

(Info D2) Web 3/3 : Figma + HTML + CSS

Document partagé du cours : https://cloud.dsaadesign-lyon.fr/index.php/s/YR8pPAm5Z927bEY

— Rappels

— Figma

— Organisation d'un projet web

— HTML

— CSS

/* Début de la règle */
selecteur{
  propriete1:valeur;
  propriete2:valeur valeur;
}
/* Fin de la règle */
/* Sélecteur d'élément */
h1{
  color:red;
}

/* Sélecteur de classe */
.rouge{
  color:red;
}

/* Sélecteur d'identifiant */
#menu-principal{
  color:red;
}
#boite1{
  width:50%;
  height:200px;
  margin:8px;
  padding:12px;
  background-color:red;
}
p{

    font-family: monospace;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    line-height: 120%;
}

— Composer un site avec CSS

Au choix :

Dans les 2 cas le travail consiste à composer une page, c'est-à-dire définir les zones de contenu (éléments HTML) et la manière dans elles s'affichent (règles CSS).

— Éléments inline et block

Comme dans Figma le positionnement des éléments peut répondre à 2 logiques : automatique ou manuelle.

À la différence de Figma, le HTML a une logique par défaut qui est automatique : on appelle ça le flux des éléments. Comme vu plus haut ce flux est lié au type d'élément, soit block, soit inline.
La règle est que :

— La propriété CSS position

Il est possible de sortir les éléments du flux, de plusieurs manières, en utilisant CSS.

Le plus simple est d'utiliser position comme dans l'exemple ci-dessous. Alors que l'élement <nav> devrait se positionner dans le flux en-dessous de <p>, une règle CSS lui attribue la propriété position:fixed, à 20px du haut et 20px du bord droit :


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<nav>☰</nav>

p{
  width:75%
}

nav{
  position:fixed;
  top:20px;
  right:20px;
}
Résultat avec position:fixed

Une fois la propriété position activée, il suffit de définir les coordonnées de l'élément avec top, left, bottom ou right.

— La propriété CSS display:flex = auto layout

CSS a une propriété très utile pour mettre en page des éléments de manière automatique, ou fluide : la propriété display, et plus précisément les valeurs flex et grid. Ces 2 valeurs permettent de positionner les éléments à la manière de l'auto layout de Figma : flux vertical et horizontal, ou en grille, gouttières, alignements, marges, etc. Voici un schéma de correspondance entre le fonctionnement de l'auto layout Figma et la Flexbox CSS :

Correspondance auto layout et FlexBox CSS

D'autres propriétés de la Flexbox s'appliquent aux éléments enfants du conteneur :

Voici 2 exemples permettant d'utiliser la propriété display avec la valeur flex, ce qui est très fréquent en développement web.

— Exemple 1 : un portfolio en une page

Voici un exemple de mise en page exploitant les possibilités de la propriété display:flex
(voir la page dans un nouvel onglet):

Les grandes zones de contenu :

Voici une présentation schématique de la structure de la page en grandes zones en HTML :

Et les grandes propriétés CSS :

Menu
Comme dans Figma, nous souhaitons positionner les éléments d'un menu en flux Flexbox automatique. Les propriétés CSS seront affectées à l'élément parent, au conteneur.

    <nav>
      <ul id="list-flex">
        <li>Home</li>
        <li>Bio</li>
        <li>Projets</li>
        <li>Contact</li>
      </ul>
    </nav>
#list-flex{
  display:flex;
  flex-direction: row;
  gap:30px;
}

#list-flex li{
  border-bottom: 1px solid #000;
}
Résultat avec flex-direction:row

Et si on met flex-direction: column; :

Résultat avec flex-direction:row

Pour ajouter un titre et des icônes pour faire un header, il faut également basculer le header en display:flex pour mieux contrôler le positionnement des éléments :

<header>
  <h1>mon.studio</h1>
    <nav>
      <ul id="list-flex">
        <li>Home</li>
        <li>Bio</li>
        <li>Projets</li>
        <li>Contact</li>
      </ul>
    </nav>
      <a>
        <img src="https://www.svgrepo.com/show/521711/instagram.svg" />
      </a>
</header>

Il faut donc ajouter display:flex au header, et utiliser 2 propriétés complémentaires : justify-content qui définit les marges automatiques (comme dans Figma), et align-items qui est la propriété d'alignement qui fonctionne comme dans Figma également.

Alignement dans Figma = align-items en CSS
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:0 20px;
}

#list-flex{
  display:flex;
  flex-direction: row;
  gap:30px;
}

#list-flex li{
  border-bottom: 1px solid #000;
  list-style-type: none; /* Pou enlever les • du menu */
}

header img{
  max-width:40px;
}

Le résultat :

Un header flex, contenant un menu flex

Voir le code complet de cet exemple : https://code.dsaadesign-lyon.fr/portfolio-98dg987shg

Exemples de portfolio :

— Exemple 2 : un article en ligne

Ci-dessous la page (voir dans un nouvel onglet):

Pour cette page il faut positionner 2 blocs principaux :

Le plan de l'article est une liste ordonnée de liens internes qui permettront de naviguer dans le texte en scrollant la page à destination d'une ancre.

Si on exprime ça en pseudo HTML cela donne :

La zone restante à droite permettra d'afficher des notes et des figures.

Voici le code complet : https://code.dsaadesign-lyon.fr/page-article

— Quelques sites de contenus pour prototyper

— Mise en forme

— Utiliser une police personnalisée

En complément des polices par défaut du système, il est possible d'utiliser des polices personnalisées, dont les fichiers peuvent être servis de 2 manières :

Méthode 1 : ajouter des fichiers typo au dossier

@font-face {
    font-family: banquise;
    src: url('../fonts/Banquise-Regular.woff'); 
    /* attention le chemin du fichier doit tenir compte de l'arborescence des dossiers, 
    d'où le ../ pour passer du dossier css/ à la racine puis au dossier /fonts */
}

/* appliquer la règle comme valeur de font-family à l'élement h1 uniquement */
h1{
    font-family: banquise;
    font-size: 96px;
}

Méthode 2 : charger une police hébergée sur Google Fonts
Parcourir le site et choisir une police, comme par exemple la Rubik Beasty. Cliquez sur Get font puis Embed code pour accéder aux instructions de liaison.

Dans votre fichier index.html (ainsi que les autres si vous avez plusieurs pages), ajoutez ces lignes avant </head> :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik+Beastly&display=swap" rel="stylesheet">

Puis dans votre fichier css/styles.css :

h1 {
  font-family: "Rubik Beastly", system-ui;
  font-weight: 400;
  font-style: normal;
}

Démo :

Code source : https://code.dsaadesign-lyon.fr/typo-google-font

— Interactions (CSS et un peu de Javascript)

— Changer la couleur au survol

Démo :

Code : https://code.dsaadesign-lyon.fr/filter-survol

— Faire apparaître un élément

Démo :

Code : https://code.dsaadesign-lyon.fr/opacity-survol

— Changer la taille et la couleur au survol

Démo :

Code : https://code.dsaadesign-lyon.fr/taille-couleur-survol

— Faire tourner un élément en continu

Code : https://code.dsaadesign-lyon.fr/css-animation

— Faire tourner un élément en scrollant

Code : https://code.dsaadesign-lyon.fr/css-rotation-scroll

Code : https://code.dsaadesign-lyon.fr/hamburger-menu

— Mettre en ligne votre travail

Une des solutions les plus courantes est d'utiliser un client FTP (File Transfer Protocol), c'est-à-dire un logiciel qui vous permet de glisser-déposer des fichiers depuis votre ordinateur vers un serveur, c'est-à-dire un autre ordinateur que vous louez chez un hébergeur, et qui est configuré pour servir vos pages web. Un des logiciels les plus connus, gratuit et open source, est FileZilla.

Problème : le wifi de l'école n'autorise pas le FTP, mais seulement le HTTP(S)... Donc il faut basculer temporairement sur votre 4G pour que cela fonctionne.

Dans FileZilla vous devez configurer un nouveau serveur.

Icône gestionnaire de sites
- Protocole : SFTP
- Hôte : 51.178.30.247
- Port : 51314
- Utilisateur : dsaa_ftp
- Mot de passe : je vous l'envoie par mail

Dans l'interface ça donne ça :

Configuration de la connexion

FileZilla affiche ensuite l'arborescence de fichiers du serveur distant. Vous pouvez maintenant glisser-déposer votre dossier ou vos fichiers un par un.

Affichage du serveur distant