Články s nálepkou HTML5

Trvalé lokální úložiště je jednou z oblastí, kde měly nativní klientské aplikace (desktopové) výhodu nad webovými aplikacemi. Představme si současné možnosti webových aplikací pro lokální ukládání dat.

Podívejme se na canvas z HTML5. Předvedeme si kreslení základních tvarů, cest, barevných přechodů a používání obrázků. Nakonec zkusíme v canvasu naprogramovat hru Halma.

V minulém článku jsme si představili metody pro sledování a zachytávání dotykových gest pro zvětšení, zmenšení a natočení (známá gesta dvěma prsty). V tomto článku přijde na řadu sledování konkrétního dotyku prstu na dotykové ploše a jeho pohybu, a to na velmi nízké úrovni.

Dotykové ovládání je v mobilních zařízeních de facto standard. Při prohlížení webu v mobilním prohlížeči jsou dotyky a dotyková gesta primární metodou, jak uživatel se stránkou komunikuje. Jak na takovou komunikaci stránku připravit? V článku si ukážeme API pro dotyková gesta.

Prohlášení společnosti Adobe o ukončení vývoje Flash Playeru pro mobilní zařízení vzbudilo velkou vlnu emocí a komentářů. Po několika dnech už je situace jasnější a přehlednější. Pojďme si tedy shrnout, co vlastně Adobe oznamuje, co to znamená pro Flash a co to znamená pro web jako takový.

Webové technologie se stále vyvíjejí a prohlížeče přicházejí s novými a novými možnostmi. V dnešním článku si ukážeme, jak byly vyřešeny nedávno zmiňované bezpečnostní problémy v protokolu WebSocket, a představíme si jednu novinku, která by mohla zlepšit „prožitek“ z některých webových aplikací.

Pro každého recenzenta je příjemné, když si přečte knihu, od které v podstatě nic moc nečeká, nanejvýš to, že autor uspořádal známé informace o určité oblasti, a záhy zjistí, že kniha nabízí mnohem víc, záběrem přesahuje i do jiných oblastí a ukazuje věci, o nichž se běžně nemluví. Toto je ten případ.

HTML5 klade silný důraz na „sémantiku“ – tedy na schopnost dávat jednotlivým částem dokumentu obecný význam. Výraznou technologií pro zápis sémantických metadat jsou mikrodata (Microdata). Jedná se o flexibilní a přitom mocný nástroj, jak vyjádřit význam informací, které jsou na webové stránce.

V předchozím článku jsme podrobně probírali třídy Blob, File a metody rozhraní FileReader. Ukázali jsme si, jak v prohlížeči otevřít soubor, předaný buď pomocí drag-n-drop, nebo pomocí INPUT FILE. V dnešním pokračování si ukážeme možnosti vytváření souborů v prohlížeči a jejich ukládání, jak na server, tak na místní disk.

Před deseti lety bylo moderní dělat weby v XHTML a v tento jazyk byly vkládány velké naděje. Pak nastalo jisté vystřízlivění a s mohutnou propagací HTML5 v posledních několika letech i jisté zatracení XHTML. Nenechme se však zmást. HTML5 a XHTML se nevylučují, naopak specifikace HTML5 je v mnoha ohledech nejlepší specifikací XHTML, jaká kdy existovala.

HTML5 je nový standard, a ačkoli vychází z toho, co už všichni webdesignéři a kodéři dobře znají, tak jeho novinky, zejména tzv. „sémantické“ tagy, nemusí být vždy a za všech okolností jasně srozumitelné. V článku si ukážeme nejčastější situace, kde se právě při práci s těmito elementy nejčastěji chybuje.

Už několikrát jsme v článcích na Zdrojáku použili FileAPI, relativně novou součást webových technologií, která umožňuje číst, zpracovávat a ukládat soubory. V této minisérii se podíváme na nejrůznější nástroje a rozhraní, která využijete při zpracovávání souborů v prohlížečích, trochu podrobněji.

Možná znáte výrok: „Vesmír existuje, jen když se na něj někdo dívá“. Mottem dnes popisované novinky – Page Visibility API – by mohla být parafráze tohoto výroku, nějak takto: „Stránka pracuje, jen když si ji někdo prohlíží“. Jak to celé funguje a jaký to má praktický význam? Ukážeme si v článku.

Ve světě nových webových technologií se nashromáždilo zase několik drobností a novinek, o nichž jsme na Zdrojáku nepsali. Teď je vhodná příležitost to trochu napravit a na některé se podívat. Začneme datovými URL, které sice nejsou až taková novinka, ale někteří webdesignéři a kodéři o nich stále nevědí.

Většina webdesignerů zná uživatelské protokoly – nebo minimálně jednoho jejich zástupce, protokol „mailto:“. Ten lze použít v odkazech, které po kliknutí otevřou mailový program. Ale co když tím mailovým programem má být webová aplikace? Lze to nějak zařídit? A lze zařídit i jiné protokoly?

Přihlášení uživatele k webové aplikaci je přece tak snadné: zadá jméno a heslo, odešle a – voila! – je přihlášen. Ale co je za tím? A co by za tím mělo být? Přinesou nové technologie nějaké změny v téhle oblasti? Oprášíme staré známé technologie, nebo vzniknou nové?

Diskuse na téma „webové aplikace, nebo nativní“ se vedou už několik let. Každý přístup má svá pozitiva a negativa, která jsou důvěrně známá a netřeba je vyjmenovávat znovu. Michael Mahemoff opět otevírá tuto otázku, tentokrát ale v souvislosti s aplikacemi pro mobilní zařízení. Nativní, nebo webové?

Upload souborů přes webové rozhraní není příliš komfortní – strohý dialog pro výběr souborů, donedávna možnost vybrat jeden soubor v dialogu, téměř nulová schopnost interakce – to vše způsobilo, že webdesignéři sahali raději k řešení ve Flashi či Javě. Nové prohlížeče se snaží nabídnout větší komfort – dnešní článek je toho ukázkou.

S nástupem AJAXu a moderních prohlížečů se schopnostmi offline práce a s pokročilými JS API se stávají jednostránkové webové aplikace (single-page apps), tedy takové, kde je veškerá funkcionalita umístěna v jedné stránce a se serverem se pracuje jen prostřednictvím datového rozhraní, stále populárnější. Jejich použití ale přináší některé problémy.

Technologie z rodiny moderních webových technologií, označované někdy souhrnně jako „HTML5“, umožňují webdesignérům vytvářet nejrůznější efekty, které byly až donedávna výsadou speciálních aplikací typu FLASH. V článku si ukážeme jeden animační efekt, a to „otáčení listů v knize“.

Podpora některých novinek z rodiny HTML5 není taková, jakou bychom potřebovali. Co v takovém okamžiku dělat? Sáhnout po náhražkovém řešení, které chybějící funkčnost nějak dodá… Stačí jen najít to vhodné. V dnešním Javascriptaření si ukážeme knihovny, které právě tento problém řeší.

V minulém článku o HTML5 mnozí komentující psali: „Dokud nebude podpora HTML5 větší, nemá smysl se jím zabývat“. Ale jaká je ta podpora HTML5? Kolik procent návštěvníků vašich stránek má canvas, kolik geolokaci, WebWorkers, stínování atd.? Víte to, nebo jen odhadujete ze statistiky prohlížečů?

HTML5 je stále tématem mnoha webdesignérských debat. Po prezentaci na toto téma pravidelně chodí lidé a říkají: „Já nevěděl, že se to dá použít už teď, já myslel, že to jsou jen zatím návrhy…“ Jak je to vlastně s HTML5 a jeho podporou? Podpora v prohlížečích je známá, co takhle podpora mezi webdesignéry?

Vývoj pro mobilní zařízení je v současnosti žhavým tématem. Letos poprvé překročily počty prodaných smartphonů prodeje klasických PC. Stále víc uživatelů používá k procházení webu mobilní zařízení, což klade nároky na vývojáře, kteří jsou nuceni své stránky upravit tak, aby byly použitelné i na těchto zařízeních.

Nedávné vydání nové verze Internet Exploreru bylo doprovázeno marketingovou kampaní, jejímž sdělením bylo, že IE9 podporuje HTML5 ze všech prohlížečů nejlíp. Na to zareagoval Paul Rouget z Mozilly prohlášením, že IE9 implementuje HTML5 ze všech prohlížečů nejhůř. Jak to tedy vlastně je? Co je lež a co realita?

Mobilní zařízení dokážou pracovat s aplikacemi napsanými v HTML. Ale co opačný postup, tj. přepsání nativní aplikace do HTML5? Je to možné. Jak na to, kde se můžete setkat s problémy a jak je vyřešit, ukáže na reálném příkladu „matematické tabule“ Jeremy Chone, vývojář společnosti N2N-Apps.

Nástroj „Wallaby“ od Adobe umožňuje převádět FLA soubory do HTML5, což se může hodit zejména grafikům a animátorům, kteří cílí svůj animovaný obsah na iOS. Článek vás seznámí i s dalšími možnostmi převodu. Pojďme se podívat, jak na to.

FileSystem API řeší jeden ze zásadních problémů webových aplikací, kterým je nemožnost pracovat se soubory v uživatelově počítači. S tímto API, které nabízí zatím jen Chrome 9, může webová aplikace vytvářet, číst, procházet a zapisovat do bezpečně vymezené části uživatelova souborového systému.

K psaní nativních aplikací pro tento populární tablet od Apple potřebujete vývojové prostředí pro jazyk Objective-C a framework Cocoa. Pro některé druhy aplikací si ale vystačíme s možnostmi, které nabízí HTML5/CSS/JS. V článku si ukážeme, jak zařídit, aby i takové aplikace vypadaly „jako nativní“.