Long live the scroll

Cours Web
Lionel Tardy & Romain Cazier & Marc Dubois


↪ Penser pour le web ↪ HTML ? ↪ CSS ?

Pourquoi ? ↓


Process

Forme ↔ Contenu ↔ Technique ↩
↪ Technique ↔ …


Penser pour le web ↑

Réaliser un design pour le web implique de comprendre un principe de base et essentiel : il n'existe pas de taille fixe.


Un aperçu des différentes tailles d'écrans sur le marché

Il s'agit donc d'adopter un mode de réflexion particulier qui est de penser flexible.

En privilégiant des éléments de design dits "fluides", vous pouvez assurer le bon affichage de votre site web, quelle que puisse être la taille de l'écran. Néanmoins il est possible que le design se "casse", c'est-à-dire que le contenu, même dans un design fluide, devienne difficilement lisible. Dans cette situation on fait appel à ce qu'on nomme des "points de rupture" où le design change radicalement pour être adapté au mieux à une résolution et celles environnantes.

Dans le cadre de ce cours nous ne ferons usage que de deux "points de rupture" : un pour desktop et l'autre pour mobile.


Exemple de site web responsive : http://klassegrafik.de/

C'est pourquoi il est important de passer par une étape de croquis puis de design, afin d'être sûr que votre design tienne la route avant d'en entamer le développement. Il ne s'agit néanmoins pas d'étapes figées puisqu'il est possible de jongler entre chaque selon les besoins ou les problèmes qui se présentent.

Une dernière chose à considérer est la vitesse de chargement d'un site web, et donc de ses images. Lorsque les gens naviguent sur leur mobile, ils attendent des sites web qu'ils se chargent en moyenne en moins de 3 secondes, après quoi ils ferment la page. L'idée étant de garder le visiteur sur son site, il est important d'optimiser les fichiers et d'employer le bon format selon les usages : le .png pour une image transparente de qualité, .gif pour une image transparente et/ou animée de basse qualité, ou le .jpg de qualité correcte mais au poids réduit. Il existe sur Photoshop une fonction "enregistrer pour le web" qui fonctionne bien ou alors des sites en ligne comme https://compressor.io/ pour compresser les images.


Ce n'est clairement pas ce que vous voulez sur votre site



HTML ? ↑

HTML est le diminutif de "HyperText Markup Language" et constitue le fondement de l'Internet tel qu'on le connait aujourd'hui. Toutes les pages que vous visitez sont composées grâce au HTML. On peut considérer le HTML comme le "squelette" d'un site web, dans le sens où on y structure le contenu.

La syntaxe de base à suivre pour écrire du HTML est la suivante : <foo>. Ceci est ce qu'on appelle une balise, elle s'écrit donc de la manière suivante : "<" suivi du nom de la balise (ici "foo") et enfin ">". Pour afficher du contenu sur une page web, on met d'abord une balise, puis le contenu (textes, images, …) et enfin ce qu'on appelle une balise dite "fermante" qui s'écrit </foo>.

Afin de visualiser la page web, on doit l'ouvrir dans un navigateur web, mais avant cela il faut pouvoir la créer et la sauvegarder. Pour la créer un simple éditeur de texte suffirait mais on se sert ici de Atom, entre autres pour le coloriage pratique du code. Le premier et le seul fichier que vous aurez à sauvegarder dans le cadre de ce cours sera nommé "index.html". Quand vous tapez une adresse dans votre navigateur web, le fichier qui sera distribué par défaut par le serveur sera celui-là, sans que vous le voyez.

Quand vous créez une page HTML, il est important d'ajouter les lignes suivantes :

<!DOCTYPE html>
<html>

</html>

La première ligne indique au navigateur qu'il s'agit d'un contenu HTML. La seconde et la dernière indiquent où le document HTML commence et se termine.

Le HTML est toujours composé de deux parties : le <head> et le <body>. Le premier contient des informations relatives au site, comme le titre du site. Le second quant à lui contient le contenu affiché de la page. Nous avons donc une page qui se présente de la sorte :

<!DOCTYPE html>
<html>
    <head>
        <title>Long live the scroll</title>
    </head>

    <body>

    </body>
</html>

Nous allons voir ensemble des balises de bases pour afficher du contenu texte, images, faire des listes, des en-têtes et des liens avec d'autres pages web ou une section de la page web elle-même. La balise de base pour afficher du texte s'écrit <p> (pour "paragraphe"). Le texte est contenu entre les balises ouvrantes et fermantes, comme suit :

<!DOCTYPE html>
<html>
    <head>
        <title>Long live the scroll</title>
    </head>

    <body>
        <p>Ceci est le premier texte de mon site web.</p>
    </body>
</html>

La balise pour afficher une image se construit un peu différemment, elle s'écrit <img> mais la source de l'image (qu'on écrit "src") est inscrite directement dans la balise elle-même, à savoir : <img src="imgs/lienversnotreimage.gif">. Ici on suppose que l'image se trouve dans un dossier "imgs" qui se trouverait lui-même à côté du fichier "index.html". C'est ce qu'on appelle le chemin "relatif", c'est-à-dire l'emplacement par rapport à la page d'où on appelle le fichier.

Il est possible de faire des listes en HTML. Elles peuvent être de deux types : ordré ou non-ordré. Lorsqu'ils sont ordrés, les éléments d'une liste sont répertoriés numériquement (de 1 au nombre d'élément total), au contraire quand ils ne sont pas ordrés, ils sont affichés avec une simple pastille. La balise pour une liste ordré s'écrit <ol>, une liste non-ordré quant à elle s'écrit <ul>. Enfin, un élément de la liste s'écrit <li>. Vous pouvez voir un exemple de liste non-ordré dans la section Pourquoi ?. Voici ce que celà donnerait en code :

<!DOCTYPE html>
<html>
    <head>
        <title>Long live the scroll</title>
    </head>

    <body>
        <p>Ceci est le premier texte de mon site web.</p>
        <img src="imgs/lienversnotreimage.gif">
        <ul>
            <li>Un élément de la liste non-ordré</li>
        </ul>
    </body>
</html>

Pour faire des en-têtes, il faut se servir d'une balise <h1>, sachant que le chiffre représente le degré d'importance de l'en-tête et qu'il va de 1 à 6. Ainsi <h1> sera très imposant alors que <h6> sera au contraire mineur. En guise d'exemple, le texte "Long live the scroll" est inscrit dans un <h1> tandis que celui qui suit est inscrit dans un <h4>.

Les liens qui pointent vers d'autres pages web ou une section de la page elle-même s'écrivent <a>. Entre la balise ouvrante et fermante est inscrit le texte qui sera affiché en guise de lien, mais il faut néanmoins renseigner ce vers quoi doit pointer ce lien. Pour celà on écrit directement dans la balise (comme pour <img>) l'adresse web comme ceci : <a href="http://www.google.com">Un lien vers Google.com</a>. Ainsi, nous aurons "Un lien vers Google.com" qui nous mènera vers la page de Google quand nous cliquerons dessus. Pour ce qui est de pointer vers une section de la page courante, il faut employer ce qu'on appelle une ancre. Une ancre est un identifiant unique qu'on va greffer à un élément HTML afin de pouvoir le singulariser et ainsi permettre de pointer directement dessus. Cet identifiant s'inscrit directement dans une balise ouvrante, quelle qu'elle soit, sous la forme <body id="top"> où "top" est donc l'identifiant de l'élément <body>. Et ça devient donc un élément vers lequel nous pouvons pointer comme suit : <a href="#top"> (notez le "#" qu'on vient ajouter pour faire comprendre qu'on pointe une ancre).

Voici ce que pourrait être notre code final :

<!DOCTYPE html>
<html>
    <head>
        <title>Long live the scroll</title>
    </head>

    <body id="ancre_haut-de-page">
        <h1>Ceci est un grand titre</h1>
        <h3>Et celui-ci un plus petit</h3>
        <p>Ceci est le premier texte de mon site web. Et ceci est un lien vers le haut de la page : <a href="#top">retourner en haut</a></p>
        <img src="imgs/lienversnotreimage.gif">
        <ul>
            <li>Un élément de la liste non-ordré</li>
        </ul>
    </body>
</html>

Et ce que le navigateur web afficherait :

Ceci est un grand titre

Et celui-ci un plus petit

Ceci est le premier texte de mon site web. Et ceci est un lien vers le haut de la page : retourner en haut



CSS ? ↑

CSS

Ou la maîtrise du style.

"CSS" est le diminutif de "Cascading Style Sheet" ou "feuille de style en cascade" en français. C'est ce qui va nous permettre de mettre en forme notre contenu HTML jusque là un peu terne. Comment se positionne tel élément ? Quelle typographie afficher ? Quelle couleur pour le fond ? Pour le texte ? Quelle taille pour mes images ? Concrètement tout est définissable en CSS, à condition de savoir comment le faire.

Où écrire le CSS ?

Il est possible d'écrire du CSS dans trois parties différentes : directement dans la balise HTML à laquelle on souhaite définir un style ; dans une balise <style> qu'on met dans le <head> de la page HTML ; ou bien dans un fichier à part avec l'extension .css qu'on vient importer dans le <head> de la page HTML. Nous verrons par après comment rédiger du CSS.

Pour insérer du code directement dans une balise HTML, on écrit de la manière suivante : <p style="font-size: 16px;">. Ici, je viens par exemple de définir que cette balise <p> aurait une taille de font de 16 pixels. Cela permet un ciblage très précis mais ce n'est pas la méthode la plus recommandée, du moins dans notre configuration. Cette méthode est employée notamment par le langage Javascript quand on définit à la volée des nouveaux styles. Les styles de cette balise <p> écraseront toutes celles définies via les autres méthodes.

Pour mettre de la CSS dans la page HTML, on insère une balise <style> dans le <head> et dans laquelle on va rédiger du CSS. Nous aurions alors quelque chose du style :

<head> <style> p { font-size: 16px; } </style> <title>Long live the scroll</title> </head>

Ici, la différence par rapport à la première méthode est que nous définissons une taille de font pour tous les éléments <p> de la page et non plus un en particulier.

Enfin nous pouvons écrire le CSS dans un fichier à part et l'importer dans le HTML. Pour ce faire il suffit de créer un fichier au format .css (nous l'appelons ici "style.css") puis de l'importer dans le <head> du fichier HTML :

<head> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>Long live the scroll</title> </head>

Ainsi nous avons la définition de l'affichage complètement séparée du contenu lui-même. Par convention c'est mieux, mais pour la lisibilité ça l'est tout autant !

Comment écrire du CSS ?

Pour définir le style de vos éléments, il faut tout d'abord les sélectionner. Il existe une multitude de sélecteurs.

Par balise

  • div
  • h1
  • body
  • etc...
div { // style }

Le * sélectionne toutes les balises, mais il est déconseillé de trop l'utiliser. On préférera utiliser des CSS reset, plutôt que de tout réinitialiser à l'aide de *.

* { // style pour TOUT }

Par #id (avec un dièse)

  • #id-a
  • #id-b
  • #id-c
  • etc...
#id-a { // style }

Les identifiants sont uniques, le css appliqué à un id sera donc très spécifique. Sinon il faudra lui préférer les classes.

Par .classe (avec un point)

  • .classe-a
  • .classe-b
  • .classe-c
  • etc...
.classe-a { // style }

Plusieurs classes peuvent être appliquées à un élément html, ce qui les rends particulièrement utiles pour le css. Aussi, plusieurs éléments peuvent avoir la même classe appliquée, ce qui n'est pas possible avec les identifiants, qui eux sont uniques.

Pseudos classes

  • a:hover
  • .id-b:first-child
  • .classe-c:focus
  • etc...
a:hover { // style }

Modifie le sélecteur selon un état ou une particularité. Le hover s'applique seulement si la souris survole l'élément. Le first-child le premier élément correspondant, etc...

Les styles

Une fois l'élément sélectionné, on peut lui appliquer des styles. Qui nous permettront de modifier une grande quantité de paramètres.

Les couleurs et fonds

.ma-classe { // les couleurs color: red;
color: #FF0000;
color: rgba(255, 0, 0, 1);
// backgrounds background-color: blue; background-image: url("urldelimage.png"); // Ou jpg ou gif }

Fonts et textes

@font-face { // import d'une font perso
font-family: "my-name";
font-src: url("urldelafont.otf"); }
.body { font-family: my-name, Arial, sans-serif; font-size: 1em;
letter-spacing: 1px;
line-height: 1.1em;
}
p { text-align: right; }

Une font uploadée sur un serveur (et une fois chargée sur l'ordinateur d'un de vos visiteur), devient récupérable. Vos fonts ne sont donc pas protégées.

Si vous cherchez des fonts déjà prévues pour le web, checkez ça Google fonts.

Margin, padding etborders

.ma-classe { padding: 4px 3px 2px 1px; // haut droite bas gauche
margin: 10px 0px; // vertical puis horizontal
border-width: 1px; // les 4
border-right-color: red; // une valeur spécifique }

Le modèle des boîtes

De base, le padding, le margin et la bordure des éléments s'ajoutent en plus de la largeur de votre contenu. Mais il est possible de changer ça grâce au box-sizing. Le padding et le border seront alors placés à l'intérieur (le margin restant à l'extérieur).

Sans cette option, la boîte peut alors dépasser de son contenur, ce qui devient gênant.

Contenu sans margin, avec bordure de 5px et padding de 20px en border-box
Contenu avec margin de 10px, avec bordure de 5px et padding de 20px en border-box
Contenu sans margin, avec bordure de 5px et padding de 20px en content-box
Contenu avec margin de 10px, avec bordure de 5px et padding de 20px en content-box

Le flux et le positionnement

Le flux

Les éléments html se placent les uns après les autres, dans le "flux" de la page. Quand ils sont en "inline", les éléments se collent à gauche du dernier élément. Quand ils sont en "block", ils se placent sur une nouvelle ligne. Cela peut être changé grâce au CSS.

.custom { display: block;
display: inline; }

Éléments inline de base

  • <image/>
  • <span>
  • <a>
  • <strong>
  • <input>
  • etc...

Éléments block de base

h6
h5

h4

  • <h1>
  • <table>
  • <form>
  • <ul>
  • <li>
  • etc...

Static, relative, absolute, fixed

De base, le positionnement d'un élément html est "static". Il est dans le "flux", est influencé par les éléments précédents, et influence les éléments suivants.

Div en position static, prends la largeur de la colonne et pousse l'élément suivant.
Élément suivant

En position relative, l'élément est décalé par rapport à sa position normale. Il ne sort PAS du flux, et influence normalement les éléments suivants.

Div en position relative, prends la largeur de la colonne et pousse l'élément suivant. Il est en plus décalé.
Élément suivant

En position absolute, l'élément SORT du flux, et n'influence pas les éléments suivants.

Survolez-moi pour voir !
Div en position absolute, se positionne par rapport au dernier élément non-static (ici la colonne col-sm-3, qui est en relative).
Élément suivant

En position fixed, l'élément SORT du flux, et n'influence pas les éléments suivants. Il se positionne par rapport à la fenêtre, et ne scroll donc pas.

Survolez-moi (et scrollez) pour voir !
Div en position fixed. Reste figé, ne scroll pas.
Élément suivant

Les éléments non-static peuvent être décalés avec les propriétés:

.non-static-machin { top: 10px;
left: 12em;
right: 20%;
bottom: -25vh;
 }

Transformations↗

Translations, rotations, scalings

Il est possible d'appliquer des transformations complexes sur des éléments html.

#transforms { position: relative;
background-color: #444;
transform: rotateX(45deg) rotateY(12deg) rotateZ(2deg) scale(0.9); }

Animations CSS↗

Transitions, delay, easing

Il est possible d'ajouter des "animations" sur des styles CSS, avec la propriété "transition", et de définir leur durée.

.truc-avec-transition { background-color: #999;
transition: opacity 1s;
padding: 20px;
cursor: pointer; }
.truc-avec-transition:hover { transition: opacity 1s;
opacity: 0; }

Survolez-moi !

Il est possible d'appliquer les transform à tout ! Il est aussi possible d'ajouter un délai avant la transition.

.truc-avec-mouvement { position: absolute;
background-color: #999;
transition: all 1s 1s;
padding: 20px;
cursor: pointer;
top: 0px;
height: 100px;
transform: rotate(0deg); }
.truc-avec-mouvement:hover { transition: all 1s 1s;
top: 50px;
height: 200px;
transform: rotate(45deg);
background-color: cyan; }

Survolez-moi !

Jquery

Intégration