Avant-Propos

Tous les documents pour ce cours doivent être téléchargés sur Moodle.

Gabarit/modèle graphique et prototype interactif d’aviation “Custom Air”

Ce cours a un double-objectif:

Dans un premier temps, enrichir et affiner votre maîtrise de l’architecture de l’information en insistant sur la nécessité d’une recherche préalable à l’élaboration des gabarits et sur une conception parfaitement maîtrisée de ces derniers à l’aide de la grille typographique et de la grille de mise en page.

Dans un second temps, l’opportunité vous sera donnée de mettre en application le cours d’intégration du premier et du second semestre, en mettant l’accent sur la qualité rédactionnelle du code et le respect des standards HTML5 et CSS3. Il vous sera demandé d’attacher une importance particulière au commentaire du code et à sa valeur sémantique.

Une phase déterminante de ce travail consistera en une lecture particulièrement attentive des consignes d’une part, de la demande du client d’autre part.

1ère partie

Recherche et Gabarits/modèles graphiques

1 – Séance 1 – Recherche – Ebauches de gabarits

• Voir article Smashing Magazine : The State of Airline Design 2015;
• Passer en revue également quelques thèmes WordPress récents dans le secteur du luxe;
• Paramétrage des grilles et charte de mise en page définis en agence;
• Zoning papier finalisés pour la fin de la première séance.

2 – Séance 2 et 3 – Téléchargement des contenus et finalisation des gabarits/modèles graphiques numériques

• Téléchargement des contenus et intégration au gabarit;
• Attention particulière: à la mise en page, aux espaces de respiration, aux alignements (utilisation des grilles), au traitement des textes (cf. consignes);
• Gabarits numériques finalisés pour la fin de la troisième séance.

Mise en ligne sur Moodle à la fin de la 3ème séance le 25 novembre 2020.

2ème partie

Intégration du prototype

Pour pouvoir réaliser cette étape correctement et répondre au cahier des charges, il est impératif que vous relisiez les consignes et la demande du client. Vous devez aussi avoir pris connaissance du support de cours mis à votre disposition dans le dossier “Aide et préparation” sur le bureau virtuel. La lecture des articles Sexy New HTML5 Semantics et  Sectioning Elements pourra aussi s’avérer utile.

La mise en page

Autre site intéressant pour tout comprendre de la mise en page CSS: Apprendre les mises en page CSS.

Tutoriel complet sur Lingulo “A Resource for Web Developers”: How to build a HTML5 website from scratch (2 parts)

La navigation

CSS Navigation Bars on W3School

13 CSS3 Navigation Menu Tutorials for Mobile, Web

25 Free and Premium CSS3 Navigation & Menus

Rendre le site responsive

Un bon endroit pour bien comprendre ce qu’implique le responsive en termes d’intégration HTML/CSS est la page dédiée du W3C.  C’est de loin l’explication la plus claire que l’on puisse trouver dans la masse d’informations disponibles sur le sujet.

Les liens suivants devraient apporter un certain nombre de réponses à vos questions.

How to Create a Responsive Navigation

How to Turn Any Site Into a Responsive Site

HTML5/CSS3 Flat Responsive Website – Start To Finish Web Design Tutorial

Mise en ligne sur Moodle le 7 décembre 2020.