Introduction

Le développement d’applicatoions web nécessite la maîtrise des briques fondamentales du web que sont le HTML et le CSS.

Cette activité aborde le concept de cadriciel (framework) CSS.

Avantages et limites du CSS écrit à la main

Avantages :

  • Contrôle total sur chaque aspect du design.
  • Optimisation.
  • Aucune dépendance externe.
  • Pas d’autre technologie à apprendre.

Limites :

  • Le positionnement des éléments et le design adaptatif (PC, tablette, ordiphone) est complexe.
  • Nécessité de réinventer des solutions pour des problèmes communs.
  • Temps de développement plus long.

Qu’est-ce qu’un cadriciel CSS ?

Un cadriciel CSS est une collection de styles prédéfinis et de composants réutilisables qui permet de développer des interfaces web plus rapidement et de manière plus cohérente.

Un des cadriciels les plus populaires est Bootstrap. W3.CSS est une alternative légère, simple facilement inter-opérable (avec d’autres cadriciels) et sans JavaScript.

Objectifs de l’activité

L’objectif de cette activité est de découvrir l’intérêt et le principe de fonctionnement d’un cadriciel CSS, et de maîtriser W3.CSS pour créer des rapidement des pages professionnelles et adaptatives.

Elle se déroule en deux phases :

  • phase d’apprentissage ;
  • réalisation d’une mission.

Un objectif secondaire et transversal est de développer ses capacités d’apprentissage.

Phase d’apprentissage

Avant de réaliser un projet / une mission, il faut développer ses compétences.

  1. Suivre le tutoriel W3.CSS, y compris W3.CSS Colors et prendre des notes pour pouvoir retrouver rapidement une documentation.
  2. Réaliser un document de synthèse en s’appuyant sur la documentation de référence : carte mentale, mémento… L’objectif est de consolider ses compétences.

Mission

Le choix de la mission est libre.

Exemple de mission (facultatif)

Développer une galerie de photos des îles de Polynésie.

Contraintes techniques

Le site doit :

  • être adaptatif (“responsive”) et fonctionner aussi bien sur ordiphone, tablette et ordinateur ; sur mobile, un menu “burger” doit permettre d’accéder aux différentes pages / sections ;
  • respecter la sémantique des balises ; exemple : un menu de navigation est une liste (ul) de liens à placer dans un élémeny nav ;
  • comprendre au moins trois pages / sections ;
  • comprendre des images / illustrations ;
  • être déployé sur l’hébergement pédagogique de la section : “web.sio.local”.

Ressources

  • Codes d’accès au serveur web.
  • Pour créer des cartes mentales :