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.
úterý 15. dubna 2008
sobota 12. dubna 2008
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.
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.
úterý 8. dubna 2008
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
Pro značku audio platí téměř vše, co platí pro video.
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.
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.
- 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) .
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.
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.
pondělí 7. dubna 2008
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:
Další odkazy
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
Další odkazy
čtvrtek 3. dubna 2008
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.
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.
středa 26. března 2008
HTML5 už i v Internet Exploreru
Čas od času píšu o implementacích HTML5 v Safari, Opeře nebo Firefoxu a jsem rád, že jsem mohl prvně psát i o implementaci HTML5 v Internet Exploreru.
Není toho moc, ale některé části HTML5 specifikace se do první beta verze Internet Exploreru 8 přeci jen dostaly.
Více se dočtete v mém dnešním článku na Lupě Internet Explorer implementuje HTML5.
Není toho moc, ale některé části HTML5 specifikace se do první beta verze Internet Exploreru 8 přeci jen dostaly.
Více se dočtete v mém dnešním článku na Lupě Internet Explorer implementuje HTML5.
neděle 23. března 2008
V pátek na WebCamp'08 o HTML5
Tento pátek budu mít v rámci konference WebCamp'08 přednášku HTML5 a budoucnost webu. Představím v ní hlavní přínosy HTML5, ukážu, jak je na tom podpora prohlížečů a předvedu i nějaké praktické příklady. Pro účast je nutná registrace.
Pokud se přijdete podívat, nezapomeňte se stavit i na kus řeči, rád se setkám se známými i neznámými čtenáři tohoto blogu.
A máte-li něco konkrétního, co byste si o HTML5 určitě přáli slyšet, napište mi to do komentářů a já se to pokusím do přednášky zahrnout.
Aktualizováno:
Pokud se přijdete podívat, nezapomeňte se stavit i na kus řeči, rád se setkám se známými i neznámými čtenáři tohoto blogu.
A máte-li něco konkrétního, co byste si o HTML5 určitě přáli slyšet, napište mi to do komentářů a já se to pokusím do přednášky zahrnout.
Aktualizováno:
Přihlásit se k odběru:
Příspěvky (Atom)
