Ecole Numérique Ardéchoise

Développer la partie front-end d’une interface utilisateur web

Description de la compétence – processus de mise en œuvre

À partir du dossier de conception technique contenant la maquette de l’interface utilisateur à développer et à l’aide des langages de développement web, créer les interfaces utilisateur web (pages web), puis coder, tester et documenter les traitements côté client, afin d’obtenir un rendu visuel adapté à l’équipement utilisateur et de fluidifier l’expérience utilisateur.
Prendre en compte les différents équipements et navigateurs ciblés.
Respecter les bonnes pratiques de développement web, d’accessibilité et les règles du développement sécurisé.
Pratiquer une veille technologique, y compris en anglais, pour résoudre un problème technique ou mettre en oeuvre une nouvelle fonctionnalité ainsi que pour s’informer sur la sécurité informatique et les vulnérabilités connues.
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. Le développement s’effectue à partir d’un environnement de développement en lien avec des navigateurs.

Critères de performance

  • L’interface est conforme à la maquette de l’application et au dossier de conception technique.
  • Les bonnes pratiques de développement web sont respectées.
  • Les règles d’accessibilité sont respectées.
  • Les pages web sont accessibles depuis un navigateur.
  • Les pages web s’adaptent à la taille de l’écran et sont fluides.
  • Le code source est documenté ou auto-documenté.
  • Les tests garantissent que les pages web répondent aux fonctionnalités décrites dans le dossier de conception technique.
  • Les tests de sécurité suivent un plan reconnu par la profession.
  • 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é.
  • La veille sur les vulnérabilités connues permet d’identifier et corriger des failles potentielles.
  • Le partage du résultat de veille est effectué oralement ou par écrit avec ses pairs.

Savoir-faire techniques, savoir-faire organisationnels, savoir-faire relationnels, savoirs

  • Coder les pages web statiques et adaptables 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 environnement de développement y compris en anglais.
  • Publier l’interface web sur un serveur.
  • Écrire un algorithme.
  • Intégrer dans une page web des scripts événementiels avec un langage de script client, en suivant les principes de sécurisation des clients web.
  • Utiliser un framework adaptatif.
  • Programmer avec un framework de script client.
  • Fluidifier le site en utilisant des mécanismes asynchrones (de type AJAX, …).
  • Documenter les scripts client.
  • Réaliser un jeu de tests des scripts client.
  • Tester la sécurité du site avec un guide de test reconnu.
  • Planifier et suivre les tâches de développement.
  • Rechercher une réponse pertinente à une difficulté technique.
  • Rechercher des informations sur des sites Internet, des forums et des FAQ francophones ou anglophones.
  • Contribuer à la mise à jour des bases de connaissances francophones ou anglophones accessibles par Internet.
  • 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é et d’écoconception web.
  • Connaissance des langages du développement web, tels que langage de balise et feuilles de style.
  • Connaissance d’un framework de présentation 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 normes ECMAScript et du DOM du W3C.
  • Connaissance des langages et framework de script client.
  • Connaissance des principales failles de sécurité des applications web (XSS, CSRF…) et de leurs parades.
  • Connaissance des bonnes pratiques de sécurisation des clients web.