Články v rubrice Značkovací jazyky

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í.

Když se občas na přednáškách ptám, jakou verzi HTML posluchači používají, jsem vždy překvapen tím, že naprostá většina se hlásí k XHTML. Při bližším ohledání stránek tvůrců v XHTML však vyjde najevo, že káží víno a pijí špinavou vodu. Svůj validní XHTML kód podsouvají prohlížeči se špatným MIME typem text/html a nutí jej používat parser HTML. HTML5 přináší některé změny syntaxe, které konečně umožňují tuto praktiku dělat tak, abychom se za ni nemuseli stydět.

HTTP je jedním z těch starých dobrých protokolů (jako třeba SMTP nebo POP3), u kterých člověk nepotřebuje žádný zvláštní klientský program a k tomu, aby se serverem navázal smysluplnou komunikaci a získal od něj odpověď, mu stačí telnet. V textu se podíváme na HTTP trochu techničtěji, „pod kapotu“.

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.

Lámete si hlavu, jak vyřešit přístupnost vašeho webu pro mobilní zařízení? Nevymýšlejte kolo a podívejte se do tohoto Průvodce – připravil po vás seznam základních strategií při „mobilizaci“, jejich výhody, nevýhody a pár tipů, které oceníte nejen při návrhu mobilních webů.

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?

Staticky generované weby byly poměrně dlouho v ústraní. Jako by se zdálo, že redakční systém je univerzální řešení, vhodné i pro ty nejmenší prezentace. Poslední dobou se ale začínají statické weby opět prosazovat – jednak díky cloudovým úložištím, které lze použít místo serveru, jednak i kvůli schopnostem HTML.

Kaskádové styly doprovázejí naše stránky již půl druhé dekády. Za ta léta jsme si stačili velmi dobře všimnout jak jejich nesporných výhod, tak i nevýhod, které především kodérům znesnadňují práci. Pojďme takové klacky pod nohama zdolat, projít si třeba jarní LESS a nadechnout se opět čerstvého kodérského vzduchu.

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čů?

Před několika dny jsme uspořádali bleskovou anketu, v níž jsme se ptali na to, jakou verzi HTML používáte a jak se stavíte k novinkám, s nimiž přichází HTML5. Dnes si shrneme a okomentujeme výsledky této ankety. Jak jsou na tom naši čtenáři s používáním HTML5 a dalších technologických novinek?

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.

Ukažme si jednoduchý příklad, čeho můžete dosáhnout pomocí otevřených technologií HTML5 a CSS3 – přehrávač videa, který dokáže video otočit a zvětšit. Nebudete k tomu potřebovat žádné složité algoritmy, ty za vás zná prohlížeč a umí je udělat sám; my si vystačíme s CSS transformacemi.

HTML5 přináší několik zajímavých API. Při použití v kombinaci s elementem <canvas> je možné vytvořit naprosto úžasný formulář k nahrávání obrázků. V tomto článku si ukážeme jak. Popsaná API fungují dobře pro Firefox 4 i pro prohlížeče postavené na Webkitu. Bohužel pro IE bude třeba použít klasický formulář.

Velmi oblíbený efekt je zobrazování pozice na mapě spolu s videem – např. při jízdě nějakou trasou, kdy vidíme video zabírané z vozu a zároveň sledujeme pozici na mapě. V HTML5 můžeme použít tagu Video a synchronizovat zobrazování trasy na mapách s přehráváním pomocí zabudovaných API funkcí.

Čtenář jistě promine kulturní narážku v nadpisu. Samosebou jde o implementaci metody drag-and-drop, tedy česky „táhni a pusť“. Podpora pro tuto metodu je totiž zahrnuta již do specifikace HTML5, takže už není potřeba k těmto účelům využívat JavaScriptových knihoven (i když se JavaScriptu nevyhneme).

Videopřehrávač, zabudovaný přímo do specifikace HTML5, není jen pokusem nahradit „asfaltovou skvrnu“ přehrávačů ve Flashi. To, že video není přehráváno v pluginu, znamená, že s ním lze přímo manipulovat pomocí webových technik (JavaScript apod.) Dnes si ukážeme některé efekty, které lze s přehrávaným videem provádět.

Už jste se někdy přistihli, že si ukládáte informace k dalšímu zpracování k elementům do atributů rel nebo class? Pokud ano, máme pro vás skvělé novinky: v HTML5 si můžete uložit libovolné informace do vlastních atributů, které jsou pro toto použití přímo určené. Pojďme si ukázat, jak na to.

Drobečková navigace je stále populárnější a ve webdesignérských a UX kruzích se probírá její správný vzhled, umístění a logika. Méně pozornosti se věnuje jejímu kódování, tedy zápisu v HTML. V článku si ukážeme několik možných způsobů vytvoření HTML kódu pro tento navigační prvek.

Pokud se podíváme na tvorbu webových aplikací z nadhledu, zjistíme, že možná mnoho věcí, které pokládáme za základ webařiny, během několika let ztratí svou fundamentální pozici. POZOR: Ke čtení tohoto textu potřebujete schopnost chápat nadsázku a dívat se na neochvějné pravdy vlastní práce z nadhledu.

Bezpečnost webů je velmi široké téma, mnohokrát probírané a diskutované. Pojďme se dnes zaměřit především na rizika a hrozby, které přináší nové technologie z rodiny HTML5. S nimi totiž přichází i celá řada nových zranitelných míst, která jsou o to nebezpečnější, že o nich tvůrci webů zatím ještě nevědí.

Kaskádové styly jsou dnes až na výjimky přijímány jako standard pro popis vizualizace formátu hypertextových dokumentů. Koncepce jednoduchého popisu s sebou ale nese některé nevýhody, které se snaží překonat různé nadstavby a preprocesory. Jedním z nich je LESS, který si představíme v dnešním článku.

Jestli se web něčím odlišuje od tištěných médií, tak je to velmi složitá kontrola vzhledu písma a textu. Weboví grafici ví, že používat zarovnání do bloku je neskutečně špatný nápad, že by měli by používat jen tzv. bezpečné fonty (které se vyskytují na většině počítačů) a že každý operační systém (a často i prohlížeč) si vykreslí písmo trošku jinak. CSS3 se snaží tyto problémy řešit, pojďme se podívat, jak se mu to daří.

Všichni se shodneme, že základem CSS jsou selektory. Jak zacílit konkrétní část HTML bylo vždycky dobrým tématem na dlouhé diskuse s kolegy kodéry. Co je udržitelnější do budoucna? Co je rychlejší? CSS3 přináší do téhle diskuse mnoho novinek, které nám mohou usnadnit práci či umožnit věci, o kterých jsme dříve mohli tak leda snít.

V předchozích dvou dílech seriálu jsme se zabývali užitečnými drobnostmi, které mohou vylepšit váš design. Dnes se podíváme na Media Queries, které mají potenciál výrazně změnit způsob, jakým kódujeme. Umožňují totiž velmi specificky přizpůsobit vzhled stránky zařízení, na jakém bude zobrazena.