HTML5 et APIs Web

HTML5 et APIs Web

• HTML5 introduit de nouveaux éléments, attributs et comportements pour les sites web et les applications web.
• Il offre un ensemble plus large de technologies pour créer des sites web variés et puissants.
• Les API Web fournissent une communication avec les serveurs de manière innovante.
• Intégration du multimédia : support natif pour les formats vidéo et audio avec diverses fonctionnalités.
• Rendu 2D/3D amélioré avec des effets variés.
• Les performances et l'intégration sont optimisées grâce à une meilleure utilisation des outils d'affichage des pages HTML.
• Connectivité et stockage hors ligne efficace du côté client.

Navigation dans le Stockage Web

• Le stockage web permet de stocker des données sur la partie client et de fonctionner en mode hors connexion.
• Accès varié aux périphériques d'entrée et de sortie.
• Thèmes plus sophistiqués avec CSS3.
• Une simple base de données côté client pour stocker les données au format clé-valeur.
• Un API (Web API) permet de stocker des données sur le navigateur.
• Web Storage : une simple base de données permettant aux utilisateurs de sauvegarder des données au format clé-valeur.
• Limite de taille : les cookies ont une taille limitée (quelques Kilo-Octets), provoquant un surplus de trafic HTTP pour chaque requête.
• Avantages du Local Storage : stockage rapide sans impliquer le serveur, amélioration des performances, absence de trafic HTTP, espace alloué plus important, et accessibilité hors ligne.
• Les données du navigateur ne sont pas cryptées et sont gérées par nom de domaine uniquement (risque de fuite de données ou d'usurpation d'identité).
• Les deux objets, Local Storage et Session Storage, permettent de stocker des données sur le navigateur.
• Local Storage permet de conserver les données même après la fermeture (après la fermeture du navigateur).
• Local Storage : Stockage rapide des données sur le navigateur sans nécessiter l'intervention du serveur.
• Aucun trafic HTTP généré, contrairement aux cookies.
• Accès aux données en mode hors connexion ou après une reconnexion.
• Sécurité : données non cryptées et gérées par nom de domaine, avec possibilité de fuite ou d'usurpation.

Fonctions et Événements du Web Storage

• setItem(clé, valeur) : stocke une paire clé/valeur.
• getItem(clé) : renvoie la valeur associée à une clé.
• removeItem(clé) : supprime la paire clé/valeur correspondant à la clé spécifiée.
• key(index) : renvoie la clé stockée à l'index spécifié.
• clear() : supprime toutes les paires associées au nom de domaine courant.
• length : renvoie le nombre de paires stockées.
• L'événement (on)storage est déclenché sur l'objet window lors de l'affectation ou de la suppression de données.
• Les propriétés de l'objet événement storage incluent key (la clé de la donnée modifiée), newValue (nouvelle valeur affectée), oldValue (ancienne valeur), url (l'URL complète de l'action), et storageArea (l'objet localStorage ou sessionStorage qui a provoqué le changement).

Drag and Drop en HTML5

• Le Drag and Drop est un élément majeur des interfaces fonctionnelles, permettant le déplacement d'éléments entre différents conteneurs.
• Avant HTML5, ce mécanisme était mis en œuvre via des frameworks JavaScript.
• Le HTML5 permet déplacer du texte, des fichiers ou d'autres éléments de n'importe quelle application jusqu'au navigateur.

Mise en Place du Drag and Drop

• Définir un élément comme "Dragable" :

  • Définir l'élément comme déplaçable en utilisant l'attribut draggable="true".
  • Définir les données à transférer.
  • Définir une zone de dépôt (Drop Zone).
  • Gérer l'opération de dépôt.
  • Gérer la fin de l'opération de Drag & Drop.

• Utiliser l'attribut global HTML draggable pour rendre un élément déplaçable.

• Les événements liés aux opérations Drag possèdent un objet dataTransfer qui encapsule toutes les données à transporter vers la Drop Zone.

• Propriétés du Drag and Drop : none: aucune copy : copie

• Les types d'opérations autorisées sont: link : lien move : déplacement

• Les listeners d'événements dragover et drop pour une zone de dépôt sont définies.

• La fonction preventDefault() est appelée pour l'événement dragover pour arrêter l'exécution d'autres événements gérés.

• L'événement drop représente l'action de relâcher l'objet sur la zone de dépôt.

• La fonction end() est appelée lorsque l'opération de Drag (de glisser-déposer) est terminée (avec succès ou annulée).

• L'événement dragend est déclenché quand l'opération de Drag ce termine .

Géolocalisation via JavaScript

• Il est possible de géolocaliser un appareil mobile de manière simple grâce à JavaScript.
• Via navigator de la fenêtre, il est possible d'obtenir des informations de géolocalisation.
• navigator contient toutes les informations nécessaires pour géolocaliser un appareil.

Méthode d'obtention de la position courante

• getCurrentPosition() : récupère la position courante.

  • Prend en paramètre deux fonctions de CallBack.
  • Le premier prend comme argument un objet contenant des informations sur la position courante.
  • La seconde prend comme argument un objet encapsulant l'erreur (en cas de problème).

• Les proprietés concernant les informations: coords.latitude = La latitude (Description des propriétés de géolocalisation) coords.longitude = La longitude (Description des propriétés de géolocalisation) coords.accuracy = Précision de la position retournée (Description des propriétés de géolocalisation) coords.altitude = altitude(Description des propriétés de géolocalisation) coords.altitudeAccuracy = Précision de l'altitude(Description des propriétés de géolocalisation) coords.heading = Direction(Description des propriétés de géolocalisation) coords.speed = Vitesse(Description des propriétés de géolocalisation) timestamp = Date/Heure (Description des propriétés de géolocalisation)

• Gestion des erreurs et API Google Maps: Code d'erreur error.PERMISSION_DENIED -> Accès refusé error.POSITION_UNAVAILABLE -> Position non disponible error.TIMEOUT -> Temps prévu pour la récupération, le temps est écoulé error.UNKNOWN_ERROR -> Erreur inconnue

• Google Maps API: Service d'affichage d'une carte à partir de coordonnées API pour une carte à partir de coordonnées.

Web Workers

• Les Web Workers permettent d'exécuter des scripts JavaScript en arrière-plan sans affecter les performances des pages web, afin d'éviter de bloquer un script sur un page HTML.
• Etapes de mise en place: Création du script à exécuter en arrière-plan

1. Test du support des Web Workers par le navigateur client.
2. Lancement du Worker
3. Récupération de la progression du Worker
4. Arrêt du Worker
5. Réinitialisation du Worker
6. Afin d'éviter toutes sortes de problème avec les Worker, il faudra tester les WorKer pour l'autorisation d'utilisation.
7. Pour le support de worker par le navigateur du client il est possible de lancer avec l'outil Worker .
8. Lancer des opérations avec la méthode postMessage .
9. Le script associé au Worker réceptionnera les paramètres envoyés en gérant l'événement onmessage
10. Le message envoyé est encapsulé dans l'objet Event. Data.
11. Il est possible d'arréter le travail d'un Worker de manière prématurée.

• En resumé:
  • Lancement du Worker, le script associé au Worker réceptionnera les paramètres envoyés à l'événement onmessage.
  • Les paramètres envoyés sont encapsulés dans la propriété data de l'objet event associé à l'événement.
  • Récupération de la progression : Lors du travail, le Worker envoie des messages signalant sa progression.
  • Afin de récupérer ces messages, il faudrait gérer l'événement onmessage sur le Worker créé. Le message envoyé est encapsulé dans la propriété data de l'objet event.
  • Les APIs d'arrêt : il est possible d'arrêter le travail d'un Worker de manière prématurée.
  • Réutilisation et réinitialisation d'un Worker