Skip to content

Latest commit

 

History

History

12-api

readme.md

12. HTML 5 API

Manipulace s historií prohlížeče

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");//přidání stránky do historie
history.replaceState(stateObj, "page 2", "bar.html");//změna záznamu aktuálního stavu v historii

Offline aplikace (application cache)

  • cachování = uchování a použití lokální kopie dat, abychom nemuseli načít soubor "zdaleka"
  • HTML 5 application cache - uložení stránek na disk, abychom se na ně mohli podívat, i když nejsme připojení k Internetu
  • funguje dobře u statických stránek či zdrojů (CSS, JS, obrázky)
  • z podstaty věci nemůže fungovat v případě server-side jazyků (PHP, Rails, Java), protože tam logiku provádí jazyk na serveru
  • výhody
    • offline zobrazení stránek (uživatel zadá URL v Internetu a zobrazí se mu naše stránky, i když není připojen)
    • rychlost - zdroje se můžou načíst z lokálního disku, kam se uložily, když jsme byli online. Cache se používá, i když jsme online.
    • web je dostupný i v případě chyby - uživatelům se zobrazí web, i když nám nejede server
    • na mobilech to má větší smysl, než na desktopu, to je jediná opravdová výhoda
  • nevýhody
    • nevýhody převáží výhody (viz dole, na co si dát pozor)
    • většina aplikací je dynamických a uživatel nevidí aktuální data
    • application cache je zbytečně složitá, doporučuji shlédnout, pochopit a nepoužívat
  • cache začneme používat přidáním odkazu na manifest soubor do HTML elementu:
<html manifest="demo.appcache">

Struktura manifest souboru:

CACHE MANIFEST
# tohle se cachuje
bootstrap.min.css
jquery-1.11.3.min.js

FALLBACK:
# tyhle soubory pouzij, pokud neni sit
img/hd.jpg img/kolo.jpg

NETWORK:
# tady muzeme dat, co se nikdy nema cachovat

Detekce offline/online stavu

Service workers

Geolokace

  • geolokace = zjištění, kde se na Zemi uživatel nachází, typicky souřadnice
  • jak to funguje?
    • každý browser pošle request na nějakou službu, kterou má v implementaci pro GEO zadanou a pošle službě svou IP, MAC, seznam WiFi pointů, a vše, k čemu má přístup a co jde nějak použít pro zjištění pozice
  • z důvodu soukromí musí uživatel se zaměřením souhlasit, nejde zjistit lokaci bez vědomí uživatele (jedině třeba podle IP adresy, ale to už není HTML 5 Geo API)
  • ne všechny prohlížeče geo podporují, je vhodné vyjímkovat script
  • přístup ke geo api je přes JS (jak jinak :)
  • existují i knihovny pro jQuery: http://jquerygeo.com
  • v budoucnu bude nutné používat https server kvůli insecure origin, viz https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins
  • příklady použití:
    • zobrazení na mapě
    • spočítání vzdálenost k cílovému místu včetně naplánování ideální cesty (např. pomocí Google Maps)
    • hledat služby jen ve městě, ve kterém uživatel je
    • nejbližší restaurace, hotely, obchody, kina, nemocnice, čerpací stanice...
    • kombinace: nejbližší italské restaurace s nejvyšším hodnocením a nejnižší cenou
    • identifikovat zemi uživatele a podle ní přizpůsobit obsah (statistika, jazyková verze aplikace, výchozí měna, formátování data a času, apod.)
  • desktop pozná lokaci jen podle IP, WiFi, zaměření nebude tak přesné jako u mobilů
  • na mobilech je typicky k dispozici GPS a vzdálenost od BTS stanic, zaměření je přesnější, ale kvůli GPS může být pomalejší
  • https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
  • http://www.w3schools.com/html/html5_geolocation.asp
  • práce s geolocation
  • práce s geolocation a zobrazení v mapě

Drag & Drop

  • přetahování objektů myší (chytnu, potáhnu, pustím)
  • např. přesunutí položky do košíku, šachy (táhnutí figurek), apod.
  • browsery default podporují:
    • přetahování označeného textu
    • obrázky (třeba na desktop, do adresního řádku)
    • soubory do input file elementu
    • pokud chceme něco víc, musíme si to napsat sami
  • při přetahování musíme určit:
    • zdroj - co budeme přetahovat, za co půjde chytit (source)
    • typ dat, která se přetahují (data payload)
    • cíl - kam budeme přetahovat, kam to půjde pustit (target)
  • události, které lze zachytit při drag and drop:
    • dragstart - začali jsme přetahovat
    • drag - přetahujeme
    • dragenter - přetahujeme a právě jsme vstoupili do komponenty, která čeká na drop
    • dragleave - přetahujeme a právě jsme opustili komponentu, která čeká na drop
    • dragover - jsme v komponentě, která čeká na drop (bude voláno opakovaně v řádu milisekund)
    • drop - upustili jsme, co jsme přetahovali
    • dragend - ukončili jsme přetahování
  • http://www.html5rocks.com/en/tutorials/dnd/basics/
  • http://www.w3schools.com/html/html5_draganddrop.asp
  • https://developer.mozilla.org/en-US/docs/Web/Events/dragenter
  • práce s drag and drop

Práce se soubory

Web storage