Interfaces Web
Séance spéciale : logo projet

But de la séance

Dans la vraie vie, personne ne fait un logo en HTML et CSS, mais c'est un exercice intéressant. A la fin de la séance, vous aurez des logos en taille grande, petite et icône que vous utiliserez dans votre projet.

Un exemple de logo pour comprendre l'objectif :

1. Un nom et un slogan pour votre école.

2. Une image qui sera le centre du logo (ou, comme moi, un symbole Unicode).

3. Une ou deux polices pour le nom et le slogan (qui seront sans doute utilisées ailleurs dans le projet).

question suivante

Tâches à faire

1. Collectivement, discutez et dessinez sur une feuille de papier l'apparence que vous voulez pour vos deux logos.

   Prenez le temps de faire quelque chose qui vous plaise mais essayez de ne pas dépasser 45 minutes.

   N'hésitez pas à avoir des idées créatives et de demander à votre chargé de TP ce qui est possible.

   Les tâches suivantes peuvent pour la plupart être faites en parallèle entre membres du groupe.

2. Trouvez comment intégrer les polices choisies (que vous avez téléchargées) au CSS. Les polices doivent s'afficher correctement même si la police n'est pas installée chez l'utilisateur.

   Si vous êtes perdus, allez jeter un oeil à la propriété CSS @font-face.

3. Ecrivez une page HTML qui correspondra uniquement au logo. Cette page devra être la même entre les versions large et petite.

4. Pour chaque version (large et petite), réalisez l'apparence voulue en ne changeant que le CSS. Quelques conseils :

   • Pensez aux différents types de positionnement vus en TP : absolute, relative...

   • En CSS, display:none retire un élément de la page, et visibility: hidden le rend invisible (mais il est toujours là).

   • Pour tourner du texte, la propriété transform est votre amie. Pour le texte courbé, c'est plus compliqué, mais n'hésitez pas à chercher sur Internet.

5. Compressez l'image à une taille adaptée à votre usage. N'hésitez pas à vous référer au polycopié.

   Vous pouvez avoir plusieurs versions ! Par exemple, l'image pour l'icône doit être très légère.

   Une idée générale pour vos images : réduisez-les à la taille où elles seront affichés sur votre site, et compressez-les à une qualité de 75. Autre régle générale : les images sur une page ne devraient pas dépasser 500 Ko.

6. Unifiez vos deux feuilles CSS en utilisant des requêtes media pour que le logo change de version suivant la taille de l'écran.

7. Placez votre logo dans un bloc et intégrez-le en haut de la première page de votre site. Vérifiez que tout va bien et réglez les problèmes.