Travail personnel
Objectifs
Ce TP est réservé au travail technique sur votre DM.
Exercice — Tester le rendu
Placez d'ores et déjà votre page d'accueil (même vide !) au bon endroit sur votre serveur, dans son répertoire TW1-2024/devoir/premier-rendu (voir le sujet). Utilisez evalweb pour vérifier que tout est OK.
Testez le rendu sur ecampus : faites comme si votre page d'accueil était terminée et suivez les instructions du sujet pour la remise du code sur ecampus, en utilisant le dépôt qui s'appelle «Dépôt test». (Pas de risque d'erreur, le vrai dépôt n'est pas encore accessible.) Pour créer un fichier zip depuis les machines de TP : clic droit sur le répertoire, « Compresser ».
Vérifiez auprès de votre chargé·e de TP que votre remise est correcte — en particulier, avez-vous bien respecté les consignes de nommage ? Si besoin, cette page explique où trouver votre numéro étudiant.
Exercice — Préparer sa page d'accueil
Vous devriez avoir déjà réfléchi à ce que vous mettrez sur votre page d'accueil (contenus, images…) et aux thèmes des autres pages.
Il faut à présent (si ce n'est déjà fait) écrire le HTML et préparer la mise en page.
Il est vivement conseillé de faire une maquette sur papier de votre page avant de commencer le CSS, afin d'identifier les zones et les blocs structurants, qui vont servir à contenir d'autres blocs.
Exercice — Polices web
Choisir une police sur FontSquirrel, la télécharger et utiliser le générateur de webfont pour créer un fichier WOFF. Utiliser cette police sur une (ou plusieurs) des pages de votre DM.
Exercice — Fignoler la présentation et le code
Continuer à avancer sur votre page d'accueil ; une fois que les éléments principaux sont en place, vous pouvez travailler sur les petits détails.
- Observez la page en prenant du recul : quelles parties paraissent trop « simples » ou « brutes » par rapport au reste ? Ne faudrait-il pas les détailler un peu plus ?
- Cherchez ce qui fait que votre page ne donne pas l'impression d'un site « professionnel » : comparez à de vrais sites, et inspirez-vous-en.
- Essayez de redimensionner la fenêtre, ou de zoomer/dézoomer (dans les limites du raisonnable) : est-ce que la mise en page convient toujours ? Est-ce que, au minimum, la page reste accessible ?
- Mêmes questions si vous changez la taille de police par défaut du navigateur (sous Firefox, menu principal > Préférences > Général > section Langue et apparence), en mettant une taille de 20 ou 24 par exemple ?
Prenez également soin d'avoir un code propre et maintenable, en suivant les principes présentés en cours :
- Votre code est-il bien indenté et lisible ?
- Avez-vous pris soin d'utiliser des éléments HTML ayant la sémantique la plus adaptée possible, notamment pour la structuration de la page ?
- Vos codes HTML et CSS ne sont-ils pas trop fortement couplés ? Avez-vous utilisé des classes pour éviter des sélecteurs trop longs/précis ? Les noms de classes sont-ils évocateurs de leur fonction (et non du style associé) ?
- Ne serait-il pas possible de mieux factoriser votre CSS, en rassemblant des propriétés communes dans des règles plus générales ?
Si votre page d'accueil est parfaite, profitez-en pour avancer sur les autres pages de votre mini-site. Si vous voulez, vous pouvez aussi travailler sur les exercices des TP précédents que vous n'auriez pas finis.