Objectifs

Manipuler les données d'une API avec des requêtes Ajax pour afficher des informations dynamiquement sur un site web. Maquetter une application mobile. Développer une solution numérique responsive et dynamique

Contexte

Le web mobile représente aujourd’hui près de 56% des visites de sites internet et est donc un des moyens indispensables lorsqu’il est question d’atteindre une cible donnée. Ainsi, la bonne compréhension des problématiques possibles et inhérentes au développement et à la construction d’une solution numérique est primordiale.

Temporalité

3,5j

Scénario

La ville de Pamiers souhaite pouvoir afficher sur les écrans de ses services la météo locale du jour. Elle souhaite aussi rendre disponible cela sur smartphone. Votre client a déjà créé une maquette desktop de son application, mais n’a pas créé la version mobile. En tant que développeur.se, Vous êtes en charge de cette étape de maquettage et de développer le site.

Ressources fournies

Maquette de la version desktop de l’application

• Couleur du fond : #00796B
• Police de votre choix (exemple : Roboto, Lato ou équivalent) Scénarios utilisateur

Compétences couvertes

• C1 - Maquetter une application (niveau 2)
• C4 - Développer une interface utilisateur (niveau 2)
• C8 - Développer une application simple de mobilité numérique (niveau 1)

Critères d’évaluation

• Ajax est utilisé
• Les interfaces sont conformes aux maquettes de l’application
• La charte graphique est respectée
• Le code source des composants est documenté
• Utiliser un système de gestion de version afin de permettre de suivre l’historique de développement (sur une période minimum de 10 modifications en arrières), création d’au moins deux branches.
• L’interface utilisateur et « responsivité » du site sont réalisées à partir d’une bibliothèque de composants graphiques (Framework css de votre choix)
• L’ergonomie respecte l’expérience utilisateur du matériel cible mis en oeuvre. Il n’est ainsi pas nécessaire de zoomer ou de-zoomer pour afficher les informations de façon lisible.
• Construction de la maquette de la version mobile de l’application, l’enchaînement et la compositions des écrans.
• Tous les projets individuels sont terminés avant de débuter l’exercice suivant.
• Les consignes, scenarri utilisateurs et contraintes sont couvertes par le projet

Consignes

Réaliser la maquette de la version mobile de l’application En utilisant une API OpenWeatherMap afficher la météo de Pamiers et les informations supplémentaires demandées en reproduisant la maquette fournie et celle créée par vos soins.

Lorsque votre projet individuel répond à toutes les demandes listées par l’exercice aidez les autres à atteindre les objectifs.

Scenarii utilisateur En tant qu’utilisateur je peux voir les informations suivante de façon dynamique :

• Le nom de ville (dans ce cas, Pamiers)
• La météo (température, vitesse du vent, taux d’humidité, la pression atmosphérique, les température min et max)
• La position GPS (longitude, latitude)
• La date d’aujourd’hui (utilisez moment.js)
• La position de la ville sur une carte (dans ce cas, Pamiers). En tant qu’utilisateur je peux afficher les mêmes informations précédemment citées pour n’importe quelle autre ville après avoir saisi son nom dans un champ texte. Les informations affichées sur la page changent dynamiquement en fonction. En tant qu’utilisateur je peux avoir accès au site depuis n’importe quel navigateur ou mobile et ce depuis n’importe où dans le monde.

Contraintes

• Le site doit être responsive
• Utilisation de Html, CSS, jQuery, Ajax

Livrables de l’exercice :

• L1 : La maquette de la version mobile du site internet
• L2 : Le code source est rendu disponible
• L3 : Lien internet vers le projet (voir exercice "Héberger un projet en ligne et partager ses recherches")

Autocorrection en binôme suivant les critères d’évaluation.

Du code review individuel sera fait par l’équipe pédagogique au moment opportun durant la semaine

Ressources

Css: https://www.agriya.com/blog/15-alternatives-bootstrap-foundation-skeleton/