Réaliser une interface utilisateur web statique et adaptable
Description de la compétence – processus de mise en œuvre
À partir de la maquette de l’interface à réaliser, de la charte graphique et à l’aide d’un langage de présentation, créer les pages web statiques et adaptables, y compris pour les équipements mobiles, afin d’obtenir un rendu visuel optimisé et adapté à l’équipement de l’utilisateur et à l’ensemble des navigateurs ciblés.
Respecter les bonnes pratiques de structuration et de sécurité ainsi que les contraintes de l’architecture du matériel cible.
Publier les pages web sur un serveur et les rendre visibles sur les moteurs de recherche.
Rechercher des solutions pertinentes pour la résolution de problèmes techniques de rendu et d’accessibilité en utilisant de la documentation en langue française ou anglaise.
Partager le résultat de sa veille avec ses pairs.
Contexte(s) professionnel(s) de mise en œuvre
Cette compétence s’exerce seul, ou en équipe quand l’ergonomie du site nécessite l’apport de compétences en web design pour la mise en page des informations et/ou des objets graphiques et multimédias. La compétence peut nécessiter l’utilisation d’un environnement de développement et d’un environnement de test pour les équipements ciblés y compris mobiles. La visibilité du site (référencement) dépend du public visé.
Critères de performance
- L’interface est conforme à la maquette de l’application.
- Les pages web respectent la charte graphique de l’entreprise.
- Les bonnes pratiques de structuration et de sécurité sont respectées y compris pour le web mobile.
- Les pages web sont accessibles depuis les navigateurs ciblés y compris depuis un mobile.
- Les pages web s’adaptent à la taille de l’écran.
- Les pages web sont optimisées pour le web mobile.
- Le site respecte les règles de référencement naturel.
- Les pages web sont publiées sur un serveur.
- L’objet de la recherche est exprimé de manière précise en langue française ou anglaise.
- La documentation technique liée aux technologies associées, en français ou en anglais, est comprise (sans contre-sens, …).
- La démarche de recherche permet de résoudre un problème technique ou de mettre en œuvre une nouvelle fonctionnalité.
- Le partage du résultat de recherche et de veille est effectué, oralement ou par écrit, avec ses pairs.
Savoir-faire techniques, savoir-faire organisationnels, savoir-faire relationnels, savoirs
- Structurer les pages selon les recommandations du W3C pour le web et le web mobile.
- Coder les pages web statiques et adaptables, y compris pour le web mobile, avec un langage de balise et feuilles de style, en suivant les principes de qualité et dans un style défensif en veillant à rendre l’application la plus résiliente possible.
- Utiliser un framework de type adaptatif, y compris pour le web mobile
Rendre visible le site sur les moteurs de recherche avec les techniques de référencement naturel. - Publier les pages web sur un serveur web.
Utiliser un outil de gestion de version de code source. - Planifier et suivre les tâches de développement.
- Rechercher une réponse pertinente à une difficulté technique de rendu et d’accessibilité.
- Utiliser un outil collaboratif de partage de fichiers.
- Connaissance d’un environnement de développement.
- Connaissance du vocabulaire anglais professionnel associé au web.
- Connaissance de l’architecture du web et des standards de l’organisme de normalisation W3C.
- Connaissance des bonnes pratiques de qualité incluant l’écoconception logicielle.
- Connaissance des langages du développement web, tels que langage de balise et feuilles de style.
- Connaissance d’un framework de présentation de type adaptatif.
- Connaissance des règles d’accessibilité des contenus web du type WCAG.
- Connaissance des modes de publication d’une application web.
- Connaissance des principes de base du référencement.
- Connaissance des principes et des règles du développement sécurisé.