GAC011 Informatique II : Développement web

GAC011 est là où vous construisez et publiez un vrai site web. Six unités vous mènent d'un design sur papier à travers HTML, CSS et JavaScript jusqu'à un site lancé et un plan pour le promouvoir.

Tout est évalué sur ce que vous produisez : un storyboard 分镜脚本 et un design, le site lui-même, et une stratégie de médias sociaux 社交媒体策略, ainsi que des travaux pratiques. Il n'y a pas d'examen écrit.

• Le design compte autant que le code. Les objectifs du module nomment l'esthétique, la mise en page, la navigation et l'utilisabilité aux côtés du codage.
• ⚠ Le site que vous concevez ici est celui que GAC017 donne un back-end et une base de données. Un plan faible coûte du temps dans le module suivant.

Vous pouvez exécuter tous les exemples de ce module dans le playground de code du site, et les références HTML, CSS et JavaScript y vont plus loin que ces notes.

• Commencez sur papier. Un wireframe 线框图 montre la structure sans couleur, qui est le seul moyen de discuter de la structure.
• L'architecture de l'information 信息架构 est ce qui va où : les pages, et le chemin qu'un visiteur suit entre elles.
• La hiérarchie visuelle 视觉层次 dit à l'œil ce qui importe — par la taille, le poids, l'espacement et le contraste, pas par la décoration.
• Conception pour le public, et dites qui ils sont avant de choisir quoi que ce soit.

• HTML 超文本标记语言 marque le sens, pas l'apparence. Un titre est <h1> parce qu'il est un titre.
• Un élément 元素 a une balise d'ouverture, du contenu et une balise de fermeture ; un attribut 属性 va dans la balise d'ouverture.
• Les éléments sémantiques 语义化元素 — <header>, <nav>, <main>, <article>, <footer> — disent à un navigateur, un moteur de recherche et un lecteur d'écran ce qu'est une région.
• Chaque image a besoin de texte alternatif 替代文本. C'est ce qu'entend un visiteur aveugle et ce qu'un moteur de recherche lit.

• CSS 层叠样式表 contrôle l'apparence, et le garder hors de HTML est toute la raison de la séparation.
• Un sélecteur 选择器 choisit des éléments ; une déclaration 声明 définit une propriété à une valeur.
• Le modèle de boîte 盒模型 explique la mise en page : contenu, puis padding, puis border, puis margin.
• La conception responsive 响应式设计 rend une page fonctionnelle sur un téléphone et un ordinateur portable, généralement avec des largeurs flexibles et une requête média 媒体查询.

Exemple résolu. Une carte trop large sur un téléphone.

La solution n'est pas une largeur fixe en pixels. Définissez max-width pour que la carte ne dépasse jamais l'écran, laissez-la rétrécir en dessous, et ajoutez une requête média uniquement pour le changement qu'un écran plus petit a véritablement besoin, comme empiler deux colonnes en une.

Concevoir d'abord le cas flexible, et traiter la requête média comme l'exception, est ce que « responsive » signifie.

• JavaScript s'exécute dans le navigateur et modifie la page après son chargement.
• Le DOM 文档对象模型 est la page sous forme d'arbre d'objets que votre code peut lire et modifier.
• Un événement 事件 — un clic, une soumission, une frappe — déclenche une fonction 函数 que vous avez écrite.
• Gardez-le simple à ce niveau : validez un formulaire, activez/désactivez un menu, filtrez une liste. Un site qui échoue lorsque JavaScript échoue est une erreur de conception, pas de codage.

• Hosting 托管 place vos fichiers sur un serveur ; un domain name 域名 guide les visiteurs vers eux.
• Test avant le lancement : chaque lien, sur un téléphone, dans un navigateur qui n'est pas le vôtre.
• Accessibility 无障碍 n'est pas optionnel — contraste, texte alternatif, navigation au clavier et texte qui s'adapte à la taille.
• ⚠ Vérifiez ce que vous avez le droit de publier. Une image ou une police sur votre site nécessite une licence qui l'autorise, tout comme une citation dans un essai nécessite une référence.

• Définissez l'audience et l'objectif avant de choisir une plateforme. "Être sur les réseaux sociaux" n'est pas un objectif.
• Un plan de contenu 内容计划 précise ce que vous allez publier, à quelle fréquence, et qui le rédige.
• Les Metrics 指标 doivent être liés à l'objectif : portée, engagement et taux de clic vers votre site sont des choses différentes, et seul l'un d'eux est le trafic.
• Mesurez, puis changez une seule chose. Changer tout en même temps ne vous apprend rien sur ce qui a fonctionné.