Le cours Réalisation multimédia I donné à l'Université de Fribourg est un cours qui enseigne les compétences nécessaires à la création d'un site web. Il ne s'agit en l'occurrence que du développement du front-end, c'est-à-dire le code qui est directement reçu et interprété par le navigateur qui va afficher le site. En conséquence, on ne concevra que des pages dites statiques, car leur contenu ne change pas.
Voici donc un résumé du cours en question.
Les langages web
Il existe différents langages qui permettent de coder une page web.
- HTML : le langage qui décrit la structure du contenu, qui crée une relation parent-enfant entre les différents éléments de la pages, et qui éventuellement les classe et les identifie.
- CSS : le langage qui définit le style, la mise en forme, le résultat visuel de la page.
- Javascript : un langage de programmation qui permet d'exécuter des instructions logiques ayant un impact sur la page.
Les deux premiers langages sont essentiels à la création de n'importe quel site web. Ce sont donc ces langages que le cours va principalement enseigner.
HTML
La première étape lorsqu'on l'on écrit du code HTML est de placer les différents éléments de la pages dans les balises appropriés, tout en prenant soin de les encapsuler d'après leurs relations parents-enfants. Avant toute chose, la balise est choisie pour son côté sémantique : elle est là pour indiquer ce que l'élément est (un titre, un paragraphe, une image, etc.).
Les éléments dans leurs balises peuvent être identifiés par un nom : cela permet par exemple de retrouver un bouton sur lequel on a cliqué. Ils peuvent également être classés dans plusieurs catégories : cela permet par exemple d'appliquer un style sur tous les éléments de la même classe.
Certaines balises impliquent déjà par défaut un résultat visuel différent des autres (par exemple les titres, les boutons, les tableaux, etc.). Mais sans la définition d'un style plus précis, le résultat visuel d'une page HTML se résume plus ou moins à des lignes de textes affichées l'une sous l'autre. C'est là que le langage CSS vient en aide.
CSS
Ce langage permet d'appliquer une mise en forme plus poussée sur les éléments de la page. Pour sélectionner les éléments à styliser, on peut utiliser leurs identifiants ou leurs classes, ou encore simplement leur balise. Il s'agit désormais de régler soigneusement chaque attributs (couleurs, taille, position, allignement) de chaque élément afin d'atteindre le résultat visuel voulu.
Avec le temps, ce langage a évolué et permet des ajustements de plus en plus poussés (transformations, animations, support des mobiles, etc.). Cela a permi notamment de se passer du Javascript pour les effets visuels, mais également de se rapporcher du web compatible mobile, dit responsive.
Flexbox
La mise en page en mode flexbox est une nouveauté dans le langage CSS qui permet aux éléments de la page de devenir flexibles. Ainsi, il devient possible de redimenssionner une page sans nuire à la mise en page initiale. Les propriétés sont nombreuses et permettent une mise en page très adaptative.
Dans le cadre de ce cours, il a été demandé de réaliser deux exercices de positionnement utilisant une mise en page en mode flexbox :
Media queries
Les media queries sont une nouvelle fonctionnalité du langage CSS permettant de définir des propriétés en fonction de la taille de l'écran. Cela permet donc d'avoir des proriétés ajustées différemment selon que la page web est visitée sur un ordinateur ou un mobile. On se retrouve au final avec une page web ergonomique capable d'être affichée parfaitement sur tous les supports.
Dans le cadre de ce cours, il a été demandé de réaliser un exercice de page responsive utilisant les media queries : page adaptative.