L’application utilisera la library JavaScript jQuery faite donc en sorte de l'inclure dans le head de votre page.
Créez le code HTML5 d’une futur Web Application en utilisant les balises sémantiquement les plus proches des besoins suivants:
Réalisez la CSS afin de respecter au mieux la capture d’écran suivante:
Ainsi que la CSS Media Queries pour smartphone afin de respecter au mieux la capture d’écran suivante:
Pour l’icone, utilisez icomoon (prenez l'icone de menu et l'icone de nuage).
Réalisez ensuite le code nécessaire à la gestion des clicks sur les 3 fonctionnalités du menu. Un click sur un des menus devra faire apparaître la partie adéquate de votre DOM.
Finalement, codez la gestion de l’apparition/disparition du menu pour smartphone ainsi que les styles css adéquats. Voilà une capture d’écran de l’application avec le menu ouvert:
Vérifiez aussi que toute votre WebApp reste responsive lors du redimensionnement.
Rajouez, dans le footer de votre application, les informations sur votre personne (au minimum votre nom et email) en respectant les formats de micro-data porposé par schema.org pour une sémantique compréhensible par les principaux moteurs de recherche du Web.
Faites qu’une partie des fonctionnalités de votre application reste accessible en mode offline. Premièrement, implémentez la fonctionnalité de la Todo List (liste des choses à faire), de l’application. Les fonctionnalités de cette partie de votre WebApp sont assez simples: l’utilisateur rentrera les informations de la tâche à réaliser via le formulaire (Un titre et une date limite obligatoire), puis lorsqu’il clickera sur le bouton ajouter, ces informations seront sauvées dans le local storage de l’application, elle seront aussi affichée sur la page. L’affichage des tâches se fera par ordre chronologique des dates limites. Pour chaque tâches affichées ajoutez un bouton de suppression de la tâche. Conseils: - Utilisez une structure de données de type tableau d’objets pour la gestion des tâches. - Initialisez cette structure lors de la première utilisation de la WebApp. - Sauvegardez cette structure de données dans le local storage grâce à un encodage JSON. - Réinitialisez cette structure au chargement de la WebApp (grâce au conteu du local storage) - Assurez vous que les éléments du tableau sont triés par ordre chronologique - Pour vous simplifiez la tâche, vous pouvez rafraichir l’integralité des tâches lorsqu’un changement dans la liste des tâches à lieu. - Utilisez la classe JsonStorage disponible sur le site du cours pour simplifier la gestion du LocalStorage.
Rajoutez une icone (ou un texte) de status online / offline dans le bandeau de votre application.
Cette icone doit indiquer (au mieux) si l'utilisateur est en ligne ou pas. L'icône deviendra verte ou rouge selon le cas.
Lorsque l'utilisateur est en mode "hors ligne", les entrées du menu "Favoris" et "Flux" ne seront plus clickable.
Implémentez le mécanisme de mise en chache de votre WebApp grâce à l'utilisation d'un Service Worker. Celui-ci devra mettre en cache toutes les ressources nécessaires au bon fonctionnement de votre page (c'est à dire: index.html, tous les JavaScripts ainsi que toutes les Css et polices). Ceçi sera fait durant la phase d'installation du Service Worker.
Afin de simplifier les évolutions de votre application, le cache devra utiliser un mécanisme de versionning. Le Service Worker devra donc "nettoyer" les précédentes versions du cache si une nouvelle version est disponible. Ceçi sera fait durant la phase d'activation du Service Worker.
Finalement, il serait intéressant de rajouter une fonctionnalité de mise en cache automatique des ressources afini de ne pas avoir à modifier constament la liste des fichiers à mettre en cache. Lorsque le Service Worker vérifie dans le cache l'existence d'un fichier et que celui-ci n'existe pas, vous devriez le chercher sur le réseau (grâce à l'instruction: fetch) et le mettre en cache. Ceçi devrait être fait durant la phase de "fetch" du Service Worker.
Notre WebApp simule la navigation entre les sections via un menu composé de lien <a>, mais cette navigation simulée rend inutilisable les boutons back et forward du browser, ainsi que l’utilisation des favoris (ou d’un lien direct) vers une des sections. En effet, pour le browser, il s’agit bien d’une unique page et la navigation interne n’est pas inscrite dans l’historique de navigation du browser. HTML5 propose une solution pour la manipulation de l’historique de navigation grâce à l’API history. Utilisez donc cette API pour rendre à nouveau fonctionnel les boutons back et forward. Voilà une proposition de solution:
Afin d’offrir à l’utilisateur la possibilité de changer de média tout en gardant ces données applicatives, implémentez une méthode d’exportation et d’importation des données. Premièrement, réalisez une nouvelle section pour votre application contenant un petit texte d’introduction décrivant cette fonctionnalité à l’utilisateur. Cette section sera affichée par défaut lorsque l’utilisateur arrivera sur votre WebApp. Elle comportera un bouton “ne plus afficher ce message” qui lui permettra lors du prochain chargement de l’applicationde ne plus voir ce message et d’accéder directement à la section “todo list”. Voilà une capture d’écran de cette nouvelle section:
L’exportation et importation des données sera bien sûr uniquement accessible en mode online. L’utilisateur pourra cliquer sur l’icone du statut online/offine du point précédent afin d’accéder à une nouvelle section. Celle-ci sera composée d’un petit texte d’explication ainsi que de deux boutons. Un pour l’exportation et un autre pour l’importation. En plus du bouton d’importation, il y aura un champ de saisie pour un code d’importation. Voilà une capture d’écran de cette nouvelle section:
Afin de simplifier au plus notre WebApp, l’utilisateur n’aura pas besoin de créer de compte. Lors d’un clic sur le bouton d’exportation, l’application devra envoyer vers le serveur l’intégralité des données utilisateurs au format JSON. Le serveur (backend) vous fournira alors un code d’exportation que vous devrez afficher dans votre WebApp.
Pour l’importation, l’utilisateur fournira un code générer lors d’un export dans le champ de saisie. Lors d’un click sur le bouton d’export, ce code sera envoyé coté serveur. Si ce code est valide (un codes généré lors d’une exportation est valable 5 minutes), le serveur vous retournera les données exportées au format JSON. Il ne vous restera plus qu’à insérer ces données dans le LocalStorage de votre WebApp.
Les codes sources PHP des scripts d’importation et d’exportation sont disponible ici:
code d’exportation code d’importation
Pour l’exportation, vous devez transmettre les données dans un paramètre nommé “data”. Vous devez aussi gérer les erreurs de communication (mode offline ou erreur lors de la communication AJAX). Finalement, critiquez la sécurité d’un tel mécanisme d’exportation/importation et fournissez quelques mesures à mettre en place pour l’améliorer.