Your SlideShare is downloading. ×
0
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Création d’une application gérant l’offline et le stockage

3,370

Published on

Techdays 2012

Techdays 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,370
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Welcome pack Davrous & Davca
  • Davrous
  • Davrous
  • Démo par le légendaire DavCa
  • T+5minDavCa
  • DavCA
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • T + 15 minDavRousConsole IIS  StopManifest dynamique avec console F12 ouverte + message dialog « voulez vous ? »
  • T + 20Davca
  • DavCa
  • DavCaDemo F12 avecDebug sur ImageProcessor.js et fonction getFile()
  • DavRous
  • DavRous
  • T + 30 minDavCa
  • T + 33 minDavRous
  • DavRous
  • DavRous
  • DavRous
  • T+38min
  • T+45 min
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • T + 50 minDavRous
  • Transcript

    • 1. Création d’une applicationgérant l’offline et le stockageclientDavid CATUHE - @deltakoshMicrosoft – davca@microsoft.comhttp://blogs.msdn.com/eternalcodingDavid ROUSSET - @davrousMicrosoft – davrous@microsoft.comhttp://blogs.msdn.com/davrous
    • 2. Du web de présentation vers le web applicatif
    • 3. Quelques fonctionnalités clés Accélération matérielle Audio/Vidéo CSS3 grid, flexible box ECMAScript 5 Multi-columns Geolocation Stockage client Websockets Drag’n’drop Webworkers Accès au système de fichiers Hit testing / touch / gestures Mode offline Canvas, SVG, animations Blobs …
    • 4. DémonstrationPrésentation de l’application SnapX
    • 5. Support du mode hors connexion
    • 6. Mode offline Version du site téléchargée lorsque le site est en ligne Prérequis : Liste des ressources (HTML, CSS, JS, Images, etc.) Le navigateur détecte la connectivité et  Si en ligne :  Télécharge les ressources  Les garde synchronisées  Si hors ligne :  Indique dans le DOM le statut  Lève un événement si le statut change Le navigateur ne fait pas :  La sauvegarde de vos données  La synchronisation lors de la reconnexion http://www.w3.org/TR/offline-webapps/
    • 7. Mode offline Mise en œuvre :  Cache Manifest File  Liste des ressources <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html  Chaque page doit pointer vers le fichier de manifeste CACHE MANIFEST /default.htm /default.css /default.js /logo.jpg # commentaires…..  Attention au cache! Il faut modifier le contenu pour forcer le rafraichissement (si vous modifiez les fichiers cibles, cela ne suffit pas!)
    • 8. Mode offline – mode avancé Gestion des entêtes : CACHE MANIFEST NETWORK: /connect.asmx CACHE: /default.htm /default.css /default.js /logo.jpg  NETWORK : Liste des fichiers uniquement disponible en mode connecté  CACHE : Liste des fichiers à rendre disponible hors ligne
    • 9. Mode offline – Mode de repli Mise en œuvre du mode de repli  Fichiers de remplacement en cas d’erreurs: CACHE MANIFEST FALLBACK: / /offline.htm NETWORK: /connect.asmx CACHE: /default.htm /default.css /default.js /logo.jpg  « / » : Chaque page
    • 10. Mode offline – Ressources externes Gestion des entêtes : CACHE MANIFEST FALLBACK: / /offline.html NETWORK: *  « * » : Toutes les ressources qui ne sont pas dans FALLBACK et CACHE
    • 11. Mode offline – Cycle de vie Manifest présent ? [checking] Déjà vu ? Oui Non [downloading] A changé ? [progress] Non [cached] [noupdate] [downloading] & [updateready]
    • 12. Mode offline - Status Window.applicationCache.status  UNCACHED  IDLE  CHECKING  DOWNLOADING  UPDATEREADY  OBSOLTE Window.applicationCache.update() Window.applicationCache.abort() Window.applicationCache.swapCache()
    • 13. Mode offline - Support http://www.caniuse.com
    • 14. DémonstrationFonctionnement hors ligne de SnapX
    • 15. File API
    • 16. File API Lecture et Création et Répertoire et manipulation écriture hiérarchie File/blob DirectoryReader BlobBuilder FileEntry/ FileList DirectoryEntry FileWriter FileReader LocalFileSystem
    • 17. DémonstrationDemo File API
    • 18. Stockageclient
    • 19. Stockage client – DOM Storage Stockage par paire clé/valeur et les propriétés sont stockées uniquement sous forme de chaîne Chaque domaine dispose d’une zone de stockage isolée de 10 Mo 2 types :  localStorage : partagé par toute l’application et persistant  sessionStorage : durée de vie par session -> pratique pour les problématiques multi-onglets Scénarios d’usage : sauvegarde d’un formulaire de saisie, mise en place de cache, etc.
    • 20. Comprendre par le code<script>var lStorage = window.localStorage;function init() { if (!lStorage.score) lStorage.score = 0; document.getElementById(c1).innerText = lStorage.score;}function save() { lStorage.score = getGameScore();}</script><body onload=“init();”> <p>Votre dernier score était: <span id="c1">non défini</span> </p></body>
    • 21. DémonstrationDémo DOM Storage – avec YODA
    • 22. Stockage client - IndexedDB De type NoSQL : paires de clé-valeur Les valeurs sont stockées sous forme d’objets JS  Une indexation permet un filtrage et une recherche efficace Tout est asynchrone et tout est transaction Les opérations classiques en SQL comme la jointure se font manuellement par code
    • 23. Comprendre via le codevar oRequestDB = window.indexedDB.open(“Library”);oRequestDB.onsuccess = function (event) { db1 = oRequestDB.result; if (db1.version == 1) { txn = db1.transaction([“Books”],IDBTransaction.READ_ONLY); var objStoreReq = txn.objectStore(“Books”); var request = objStoreReq.get("Book0"); request.onsuccess = processGet; }};
    • 24. IndexedDB - Support http://www.caniuse.com
    • 25. Idées de scénarios Canvas ou autre élément HTML File Object (Blob) Web File Object Indexed (Blob) DB
    • 26. DémonstrationUne belle démo moche d’IndexedDB ! Démo de l’outil de debug iDBGestion d’IndexedDB dans SnapX avec driver BackBone.js
    • 27. Drag’n’Drop
    • 28. Drag’n’Drop Gestion du glisser/déposer interne et externe Recette de cuisine :  Marquer les objets [draggable]  S’abonner aux événements (ondragstart, ondragend)  Définition de la dropzone  Via l’attribut [dropzone]  Via les événements (ondragenter, ondragover)  S’abonner à l’événement ondrop  Récupération de l’objet DataTransfer
    • 29. Drag’n’Drop – les événementsde départ<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)" > <li draggable="true" data-value="World of Warcraft">Wow</li> <li draggable="true" data-value="Elder Scroll 5">Skyrim</li> <li draggable="true" data-value="Angry birds">Angry Birds</li></ol>
    • 30. Drag’n’Drop – les événementsde réception <div ondrop="dropHandler(event)" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"> </div>
    • 31. Drag’n’Drop – DropZone <div dropzone="move string:text/monformat" ondrop="dropHandler(event)"> </div> Mode de drop: Moniker: Type mime • Move • File • Link • String • Copy
    • 32. Drag’n’Drop - DataTransfer Interface utilisée pour stocker les données à transférer  dropEffect : none, copy, link, move  effectAllowed : none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", "uninitialized“  items  setDragImage  addElement  types  getData / setData  clearData  files
    • 33. Drag’n’Drop - Lancement <script> var internalDNDType = text/monformat; function dragStartHandler(event) { if (event.target instanceof HTMLLIElement) { event.dataTransfer.setData(internalDNDType, event.target.dataset.value); event.dataTransfer.effectAllowed = move } else { event.preventDefault(); } } </script>
    • 34. Drag’n’Drop - Réception <script> var internalDNDType = text/monformat; function dropHandler(event) { var li = document.createElement(li); var data = event.dataTransfer.getData(internalDNDType); if (data == World of Warcraft) { li.textContent = Yeahhh; } else { li.textContent = Game over; } event.target.appendChild(li); } </script>
    • 35. DémonstrationGestion du drag’n’drop de SnapX
    • 36. <Questions/>
    • 37. palais descongrèsParis7, 8 et 9février 2012

    ×