Font nebude validní

Včera došlo k drobnému posunu týkajícímu se značky font v HTML5. Okolnosti, proč byla zahrnuta do specifikace jsem probíral v Odlišná pravidla pro HTML z WYSIWYG editorů?

Ian Hickson včera oznámil, že značka font bude potlačena ve prospěch atributu style.

Z toho vyplývá:

• atribut style, který byl (podle mě nelogicky) v prvním draftu HTML5 zcela vyřazen, se do HTML opět vrací.
• použití značky font je nevalidní za všech okolností (v prvním draftu bylo validní pokud byl dokument vytvořen WYSIWYG editorem)
• specifikace HTML5 bude i nadále pokrývat zpracování značky font v prohlížečích (aby prohlížeče dokázaly zpracovat stávající obsah webu)
  

Zdroj: Karl Dubost - font is dead, vive le style

Ikony stránek s rozměry

Řada webových stránek dnes obsahuje svou ikonu (tzv. favicon). Dnes se ovšem z obyčejné webové stránky snadno může stát skoro-desktopová aplikace (jakmile prohlížeče implementují HTML5, můžete ono "skoro-" vynechat) a u těch jsou požadavky na ikony přeci jen poněkud větší.

Ian Hickson včera zahájil diskusi na téma ikon svým jednoduchým návrhem: <link rel=icon width="" height="">.

Diskuse se rozrostla. Někteří účastníci mají například pocit, že by měl být zohledněn i používaný OS (přeci jen každý má trochu jiné zvyklosti) a tak navrhují následující použití:

<link type="icon" type="application/svg" sizes="any" href="whatwg.svg">

<link type="icon" type="image/microsoft.vnd.icon" sizes="16x16 32x32" href="whatwg.ico">

<link type="icon" type="image/x-apple-icons" sizes="16x16 32x32 64x64 128x128 256x256 512x512" href="whatwg.icns">

<link type="icon" type="image/png" sizes="59x60" href="whatwg.png">

Diskuse stále probíhá ve vláknu začínajícím emailem Iana Hicksona, zapojit se můžete i vy.

Desktopové ikony se hodí nejen u pokusů typu Mozilla Prism, ale například i u asociace protokolů s webovými aplikacemi, což je součást HTML5, která byla implementována ve Firefoxu 3.

Web Forms 2 do WebKitu v rámci Google SOC

Specifikaci Web Forms 2.0, která - byť zatím separátním dokumentem - je součástí HTML5, implementovala pouze Opera. Pro ostatní prohlížeče existují různé emulace, např. projekt webforms2 na Google Code, ale ty mají do produkční kvality daleko.

Proto mě potěšilo, že v rámci akce Google Summer of Code, které se účastní i WebKit, se objevil projekt implementace Web Forms 2 do WebKitu. Podle popisu projektu nebude student Michelangelo De Simon, který se k úkolu přihlásil, implementovat celou specifikaci, ale odhadem tak 40 %.

Jsem zvědav, zda se Michelangelovi jeho projekt povede (úspěšnost projektů v Google SOC není příliš velká). Navíc ostatní implementátoři v tuto chvíli vyčkávají, než Forms Task Force rozhodne, zda budou Web Forms 2 do HTML5 zahrnuty tak jak jsou nebo zda se před tím dočkají nějakých změn.

HTML5 a spouštění skriptů

Specifikace HTML5 se zaměřuje i na spouštění skriptů ve stránce. Zmíním dvě zajímavosti týkající se spouštění skriptů.

Atributy defer a async

V HTML4 byl u značky script definován atribut defer, který umožňuje prohlížeči pokračovat ve zpracovávání dokumentu, aniž by musel čekat na proběhnutí daného skriptu (skript ovšem nesmí měnit stránku během načítání, výsledek by pak byl nepredikovatelný). Specifikace bohužel již nijak neříká, kdy přesně má být skript spuštěn.

Atribut defer zatím implementuje pouze Internet Explorer, ale tato implementace je považován za "nekonzistentní" (nekonzistentní uvádím v uvozovkách, jelikož specifikace chování nepopisuje, nelze žádné chování označit za správné či nikoliv).

Pro vyřešení situace HTML5 u značky script zavádí dva atributy defer a async. Oba slouží podobnému účelu, ovšem zatímco:

• skript označený jako async bude spuštěn, jakmile je dostupný (Zpracování stránky se u značky skript nezastaví, pokračuje dále a skript je spuštěn, jakmile se načte, tedy v nepredikovatelnou dobu.)
• skript označený jako defer bude spuštěn až v momentě, kdy se dokončí zpracování (parsování) celé stránky (Tedy v predikovatelnou a vždy stejnou dobu. Specifikace hovoří o dokončení parsování stránky, prohlížeč tedy v tu dobu může stále ještě načítat další zdroje, např. obrázky.)
  

Autoři webových aplikací by mohli správným použitím těchto atributů načítání stránek urychlit. Za zmínku stojí, že vývojáři WebKitu jsou trochu jiného názoru. Místo, aby vývojáři do svých stránek museli vkládat jeden atribut async za druhým, snaží se problém řešit i na straně prohlížeče.

Událost dokončení načítání stránky

Druhá zajímavost se týká událostí načtení stránky. Klasická událost load totiž vždy nestačí, ta je totiž vyvolána až v momentě kompletního načtení celé stránky. Pokud webová stránka obsahuje veliké obrázky, čeká událost load na jejich načtení.

To je často v rozporu s požadavky uživatelů i vývojářů (když se vám načítá stránka s galerií, je žádoucí, aby její vrchní část fungovala nezávisle na spodní části, do které se stále ještě načítají další fotografie).

Jednoduché řešení fungující ve všech prohlížečích neexistuje, a proto byla vymyšlena celá řada triků, jak toho docílit.

HTML5 specifikuje událost DOMContentLoaded, která je vyvolána právě v kýženém momentu - tedy hned po zpracování celé stránky. V tuto chvíli ji podporuje trojka prohlížečů S.O.F. (Safari, Opera, Firefox), v IE lze emulovat některým z odkázaných triků.

SVG do HTML5 - znovu a jinak

Pokus o začlenění SVG do HTML5, který připravovala WHATWG spolu s pracovní skupinou pro HTML, byl zrušen na žádost pracovní skupiny pro SVG. Hlavním argumentem byla nekompatibilita syntaxe takto vkládaného SVG se stávajícími implementacemi SVG.

Pracovní skupině pro SVG se ovšem celý nápad se začleněním líbí a pokusí se přijít s vlastním řešením, při kterém by kompatibilita zůstala zachována v maximální možné míře.

Práce na začlenění MathML a datových atributů i nadále pokračují. Více se o průběhu celé problematiky dočtete v mailinglistu HTML WG (sledujte vlákna, která mají v předmětu SVG nebo MathML).

Další odkazy

• SVG In HTML: Did You Blink?
• HTML5: SVG in text/html Dropped For Now
  

Uvozovky uvnitř značky q

Značka <q>, používaná pro označování citací, v HTML5 již nebude sama o sobě zajišťovat vykreslení uvozovek okolo citovaného textu. Pokud autor uvozovky okolo citovaného textu vyžaduje, v HTML5 je musí okolo textu uvnitř značky <q> vložit ručně. Oznámil to nedávno Ian Hickson v diskusní skupině WHATWG.

Chování značky q v HTML5 se tak bude odlišovat od HTML4 specifikace, která vykreslení uvozovek prohlížečem požadovala. V praxi se na toho chování ovšem nedalo spolehnout, protože je Internet Explorer nepodporoval.

Ian Hickson dále navrhuje vytvoření pseudo-značek ::quote-start a ::quote-end, které by umožnily definovat uvozovky podle jazykových zvyklostí, a zaslal tento návrh pracovní skupině pro CSS.

Návrh jsem nenalezl a není mi zatím úplně jasné, jak je s novým zpracováním značky <q> v souladu. Uvidíme, zda se nějaké detaily neobjeví na blogu CSS WG, poslední dobou je tam docela živo.

Firefox 3 umí uložit obsah canvasu

Canvas je novou HTML značkou, která umožňuje vývojářům kreslení přímo do webové stránky. Nedávno jsem si všiml, že se v uživatelském rozhraní Firefoxu 3 objevila možnost uložit canvas jako obrázek.

Canvas sám o sobě podporuje vygenerování fyzického obrázku. Vývojářům stačí zavolat jeho metodu .toDataURL(), která vygeneruje obrázek z aktuálního obsahu canvasu. Vývojáři tak mohou nabídnout uživateli vygenerovaný obrázek ke stažení nebo naopak uložit vykreslený obsah canvasu na server. Vyzkoušet si to můžete na jednoduchém příkladu (obrázek vygenerujete přímo kliknutím na canvas).

Firefox 3 jde ale ještě o krok dál a nabízí stejnou možnost přímo v uživatelském rozhraní. Z pohledu uživatele se tak zastírá rozdíl, co je skutečný obrázek, a co je obrázek vykreslený canvasem. Oba se navenek chovají stejně a uživatel mezi nimi ani nemusí poznat rozdíl.



Vyzkoušet si to můžete například na stránce Canvex (pěkný pokus o implementaci Dooma připomínajícího herního enginu v prohlížeči). Kdykoliv zobrazíte na hrací ploše kontextové menu, můžete si ve formátu PNG uložit obrázek aktuálního dění ve hře.

Jsem zvědav, zda se tím budou inspirovat i ostatní prohlížeče.

Zkoušíme audio a video v Safari - několik ukázek

Safari 3.1 je první prohlížeč, který podporuje HTML5 značky <audio> a <video> v ostré uživatelské verzi. Trochu mne to překvapilo, popravdě nejsem si jist, zda je to již dostatečně otestovaná vlastnost, ale nevadí, vyzkoušíme.

Experimentoval jsem a vytvořil pár jednoduchých příkladů. K základnímu zkoumání se vám můžou hodit. (V příkladech vždy nahoře vidíte zdrojový kód, který můžete upravovat, a dole výslednou stránku.)

Poznámka: Ukázky vám budou správně fungovat pouze, máte-li nainstalováno Safari 3.1 nebo novější spolu s Quick Time.

Značka video

• Video, jehož ovládání skriptuje autor stránky. V mém případě jsem pro ovládání videa zvolil triviální řešení, a to obsluhu click události, kterou uživatel video spustí nebo zastaví. Uživatelsky přívětivější výsledek najdete na webkit.org.
  
• Podobný příklad, ale atribut autoplay zajistí automatické spuštění videa po načtení stránky. Zastavení a následné znovuspuštění videa je opět řešeno pomocí click události.

Zatím jsme si ovládání videa programovali sami. A to může být mnohem složitější - včetně ovládání hlasitosti, velikosti přehrávaného videa, zobrazení posuvníku právě přehrávané scény atd. Fantazii se meze nekladou, ovšem co když chcete video prostě vložit a o nic víc se nestarat?

• Ovládací prvky videa můžete nechat zcela na prohlížeči atributem controls. Tak bude asi vypadat nejčastější použití značky video. Není specifikováno, jak má uživatelské rozhraní vypadat, každý prohlížeč může nabídnout rozhraní trochu jiné, které se může lišit i v závislosti na platformě. Ovšem nikdy by nemělo zasahovat do okolní stránky (pak byste totiž nikdy nevěděli, jak bude video box vlastně veliký). Prohlížeč Safari vkládá ovládací prvky dovnitř boxu s videem (během přehrávání se skryjí, takže nevadí). Dalším řešením je umístit je do kontextového menu (to Safari zatím nepoužívá).
  
• Přehrávání je spojeno s řadou událostí (napočítal jsem jich jeden a dvacet), na které může kód stránky reagovat. Ukažme si jen jednu z nich - událost ended, která je vyvolána při skončení videa.
  
• Pro určení zdroje videa lze použít i značku source. Tento zápis použijeme asi jen, pokud chceme přesně určit kodek videa (nebo audia), protože pro ně nabízí upřesňující atributy. Update: Další zajímavé použití značky source je, pokud máme video v několika formátech. Pak přidáme několik značek source (pro každý formát jednu) a prohlížeč použije první formát, který dokáže zpracovat. Prohlížeč se rozhodne podle analýzy atributu značky source a stáhne jen jeden vybraný formát (nemusí tedy všechny stahovat a analyzovat) .
  

Značka audio

Pro značku audio platí téměř vše, co platí pro video.

• Pokud u značky audio použijeme atribut controls, zobrazí se ovládací prvky pro přehrávání, což je na rozdíl od videa to jediné, co ze značky vizuálně vidíme. Zde přesně nevíte, jak budou ovládací prvky veliké, reagují sice na CSS vlastnosti width a height, ale mají svou minimální velikost (ta není definována a bude záviset na prohlížeči), pod kterou je nezmenšíte.
  
• Pokud nepoužijeme atribut controls, pak je značka audio neviditelná, přidáme-li navíc atributy autoplay a playcount , vytvoříme neviditelné přehrávací zařízení, které lze vypnout jen opuštěním stránky. Přirozeně se předpokládá, že autor stránky v takovém případě nabídne uživateli své vlastní ovládací prvky (hezčí než ty, co nabízí prohlížeč) pro ovládání hudby, resp. zastavení nežádoucího hluku.
• Značce audio se můžete zcela vyhnout a přehrávat zvuk za pomoci JavaScriptu a objektu Audio.

Poznámky

Myslím si, že oproti různým obskurnostem, které dnes musíme při vkládání videa do HTML protrpět (včetně řešení různých prohlížečů a už vůbec nemluvím o odlišných řešeních pro různé druhy videa) jsou nové HTML5 značky celkem intuitivní a příjemné.

Popsal jsem jen základní vlastnosti, více najdete v HTML5 specifikaci v částech Video Element, Audio Element, Media Elements a Source Element.

Možná jste si v příkladech všimli, že s novými značkami jsme schopni uživateli bez jeho vědomí spustit video nebo hřmot i v případě, že má vypnuté pluginy (hlavně Flash) a JavaScript. Dosud bylo takové prostředí považováno za nedotknutelné.

Jsem přesvědčen, že prohlížeče přijdou s jednoduchou předvolbou, jak takové chování zakázat (něco jako Nechci být rušen ON), v případě Safari se tomu tak ovšem nestalo a uživatele před ozvučenými stránkami zatím nic neochrání.

V implementaci v Safari jsem objevil i malou chybu, resp. odchylku od specifikace. Pokud uživatel nemá povolený JavaScript, nemůže vložené video nebo audio ovládat (ani ho spustit), pokud nejsou atributem controls zapnuty ovládací prvky prohlížeče. V takovém případě má prohlížeč tyto ovládací prvky zobrazit, i když atribut controls nebyl definován. To Safari zatím neřeší.

Zajímalo by mne, kdy se podobná verze Safari dostane i do iPhone (nemám, nemohu ověřit), přeci jen některým čistě iPhone specializovaným webům by tahle zjednodušená syntaxe mohla přijít vhod.

SVG, MathML a datové atributy do HTML5

HTML5 popisuje syntaxi jak pro HTML tak XHTML variantu jazyka. Vývojáři si pak můžou vybrat, který z nich chtějí v budoucnu používat. Každý má své výhody i nevýhody. Jednou z největších nevýhod HTML je nemožnost používat jmenné prostory.

Ačkoliv dnešní vývojáři to jako velkou nevýhodu zatím většinou nepovažují, s rozšířením dalších technologií (např. SVG) by se problém výrazně prohloubil. Ian Hickson nedávno oznámil, že hodlá nalézt řešení.

Nejedná se o zařazení jmenných prostorů do HTML obecně (to by samotné HTML příliš zkomplikovalo), ale o začlenění vybraných technologií. Jejich přehled najdete na WHATWG Wiki, stránce New Vocabularies.

Do HTML5 tak pravděpodobně bude možné přímo začleňovat:

• SVG
• MathML
• vlastní datové atributy

V posledních revizích HTML5 specifikace již najdete zárodky vznikajícího řešení, které se hledá i za pomoci některých dalších skupin W3C, např. Math WG. Jsem sám zvědav, jaký bude výsledek.

Další odkazy

• Exploring new vocabularies for HTML
  
• HTML5: custom data
• HTML5: the foreign lands (mathematics and graphics)
  

Video bude ve Firefoxu i pro mobily

Práce na podpoře nové HTML značky video ve Firefoxu stále pokračují. Zajímavou novinkou je použití GStreameru, což pokud dobře chápu umožní prohlížeči přehrávat video nejen pomocí vlastních kodeků prohlížeče (v tuto chvíli pouze OGG Vorbis), ale i využít některé kodeky nainstalované na uživatelově počítači.

Christopher Blizzard se úspěšně pokusil sestavit experimentální verzi pro mobilní zařízení a zdůrazňuje, že podpora videa v prohlížečích nemá význam jen pro desktop, ale i pro další zařízení, na která Firefox do budoucna míří. Jak se mi to povedlo, posuďte sami.

Pokud se zajímáte o platofrmu Maemo, můžete si Chrisův build vyzkoušet.