K čemu bude magická značka device

Bez přístupu webových stránek k webkameře a mikrofonu si budoucnost webu dnes už asi nemůžeme představit. Byl by třeba i bez rostoucích trendů typu rozšířená realita (augmented reality), s nimi je zapotřebí dvojnásob.

Nápady, jak takový přístup zařídit, nejsou nové, ovšem teprve nedávno se začalo pracovat na standardním řešení pod hlavičkou HTML5.

A proto vznikla značka <device>. Jedná se o abstraktní rozhraní pro přístup k lokálním zařízením. Takovým zařízením může být webkamera (ale nejen ona). Značka device zajistí jen přístup k datům, nikoliv jejich výstup ani zpracování, k tomu využije napojení na některou další technologii. Takový zápis:

<device type="media" onchange="update(this.data)">

umožní uživateli zapnout kameru (jedná se o akci, kterou musí uživatel potvrdit), přičemž vlastní výstup v tomto případě směřuje do značky video:

<video autoplay></video>
<script>
function update(stream) {
document.getElementsByTagName('video')[0].src = stream.URL;
}
</script>

(Příklad pochází ze specifikace.)

To není vše, obsah kamery by nemusel být jen vykreslován, mohl by být zpracováván a pomocí canvasu upravován (např. pro vytvoření zmíněné rozšířené reality) a v případě napojení streamu na technologii Web Sockets může být stream videa zasílán do internetu (např. pro tvorbu videokonferencí - příklad pochází z blogu WHATWG).

Celý návrh je zatím jen první myšlenkový draft a jak to u podobných případů bývá, může před svou realizací projít velkými změnami nebo být zcela zrušen.

Mé poznámky:

1. Nejsem si jist, zda potřebujeme mít HTML značku <device>, nepostačilo by pouze javascriptové rozhraní? Ale je možné, že značka má vytvořit nějaké UI pro výzvu uživateli (podobně jako ji tvoří třeba <input type="file">), pak by dávalo umístění do dokumentu smysl.
   
2. Ptám se samozřejmě i sám sebe, zda potřebujeme <device>, když lze podobný výsledek dosáhnout ve Flashi. A hned si odpovídám, že potřebujeme. Protože zapsání značky <device> spolu s několika řádky JavaScriptu bude pro klasického webového vývojáře prostě neporovnatelně jednodušší, než projít kompilačním procesem Flashe, resp. se jej vůbec naučit. V tomhle Flashi trochu ujíždí vlak. Obsahuje sice zajímavé technologie, ale nedokáže je rozumně zpřístupnit webovým vývojářům formou, na jakou jsou zvyklí. Pokud Web dokáže nabídnout technologie stejného kalibru (to se mu zatím nedaří, ale směřuje k tomu poměrně dobře), bude muset Flash nabídnout něco jiného, čím by zaujal.
   

O HTML5 zpíval už Bob Dylan (video uvnitř)

Možná tu píseň znáte ve verzi The Times They Are A-Changin'. Její méně známá verze ovšem zpívá o změnách v HTML5.

Poslechněte si ji v interpretaci Daniela Davise z Opery. Nemá sice tak pěkný hlas jako Bob Dylan, ale zas pěkně hraje na tu malou kytaru, které se správně říká ukulele.



Anebo trochu živější interpretaci v podání Bruce Lawsona (rovněž z Opery!):



Text v sobě skrývá mnoho pravdy ze standardizačního prostředí.

HTML5 – It is a Changin’

by Jeffrey G. Allen

Come gather ’round coders
wherever you roam
And admit that internet
Around you has grown
And accept that soon
A new spec will stand on its own.
If your skills to you
Are worth savin’
Then you better starting learnin’
Or you’ll sink like a stone
For HTML5 it is a-changin’.

Come designers and developers
who prophesize with your blog
And keep your mind wide
this chance won’t come again
And don’t speak to soon
For the spec is still in spin
And there’s no telling who
will be recodin’.
For the early adopter now
Will be later to win
For HTML5 it is a-changin’.

Come senators, congressmen
Please heed the call
Don’t sit on your thumbs
In the gathering hall
for he that gets lost
will be he who has stalled
There’s a spec in the works
And it’s changin’.
It’ll soon trim down your code
And add meanin’
For HTML 5 it is a-changin’.

Come mothers and fathers
Throughout the land
Learn to use content filters
And help to fight spam
Your sons and your daughters
Have gone mobile
And you’re old ways of surfing
is rapidly changin’.
Please get off the new one
If you can’t understand
For HTML 5 it is a changin’.

The spec it is out
It is Working Draft
The current one now
will later be past
As the new one
will venture to last
The spec is
rapidly changin’
And the current one now
will later be last
for HTML5 it is a changin’.

Po Internetu ovšem kolují rozmanité varianty, např.

Come Zeldman and Meyer
Malarkey and Mols
Let your songs of web standards
Ring in the halls.
And the lessons you teach
disseminate to one and all.
For the web that you now know
is not what you knew
For HTML 5 it is a changin’.

nebo

Mozilla and Safari,
Opera and IE,
HTML 5 needs your help
To be all it can be,
Wide browser support
Would help tremendously
And don’t forget about support for CSS3
HTML 5 It is a changin’

Na tento úžasný šlágr upozornila Molly E. Holzschlag.

Nedalo mi to a vzpomněl jsem si i na svůj HTML5 trailer, který jsem před lety vytvořil experimentuje s videem.

Řešení včerejší hádanky. Podívejme, jak jste si vedli

Včera jsem vám dal hádanku, dnes předvedu řešení. Ať víte, zda můžete skákat radostí nebo ne. BTW přišlo mi cca 100 odpovědí, to je hezké.

Připomenu zadání. Stránku http://id.annevankesteren.nl/ tvoří jednoduchý kód (viz obrázek níže), ale přesto výsledná podoba stránky odporuje zdravému webdesignerskému rozumu, např. je má černé pozadí, a barevné písmo, ačkoliv zdrojový kód žádné definice barev neobsahuje. Vaším úkolem bylo určit, čím to je.



Napřed tu špatnou odpověď: Stránka obsahuje SVG, které je zodpovědné za ony grafické změny.

Pokud jste takhle odpověděli, nechali jste se pěkně nachytat. Stránka sice obsahuje SVG obrázek, ten ovšem obsahuje pouze logo OpenID:
Mohli jste si to ověřit buď dešifrováním onoho SVG souboru, který obsahuje dvě vyplněné cesty (s dešifrováním pomůže tutorial), nebo i jeho pouhým zobrazením v prohlížeči. Jak prosté milý Watsone!

A jaká je správná odpověď? V hlavičce HTTP se vyskytuje položka Link: <fancy.css>; rel=stylesheet a za design stránky je zodpovědný stylopis fancy.css.

Položka Link v hlavičce HTTP je alternativním způsobem pro přidružení stylopisu ke stránce a funguje analogicky jako značka LINK v hlavičce HTML.

Tento mechanismus se běžně nepoužívá (nepodporují jej všechny prohlížeče). Je zmiňován ve specifikaci HTML4.01, v minulosti tu byla několikerá snaha jej začlenit i do specifikace HTTP, ale neúspěšně (podrobně celý proces najdete zdokumentovaný na wiki W3C).

BTW před rokem jsem o tomto mechanismu psal na Zdrojáku, když jsem jej ještě vedl.

Pozn.: Někdo z vás si všiml, že Firefox použije stylopis i pro zobrazení jeho samého (taková kuriozita: styl stylující sám sebe). Vypadá to sice moc hezky, ale jedná se evidentně o chybu prohlížeče.

Zhodnocení řešitelů

Výsledek hádanky dopadl dobře a moc mě potěšil. Řada z váš našla bez dlouhého zaváhání správnou odpověď.

Je zároveň vidět, jak dobré nástroje dokáží posílit generační zdatnost. Kdybychom stejnou hádanku zadali takové 4 roky nazpět, výsledné skóre by pravděpodobně tolik povzbudivé nebylo.

Nástroje jako jsou Firebug, Web Inspector a další nám pomáhají hravě vyřešit i problémy, se kterými jsme se dosud nesetkali. Odpovězte si sami, zda byste problém vyřešili (resp. rychle vyřešili, nebo zda vůbec vyřešili) v případě, že byste podobné nástroje neznali. A tím nemyslím jen to, že byste je neměli právě po ruce, ale kdybyste je neviděli nikdy v životě.

Tak na viděnou u nějaké další hádanky. Ostatně pokud víte o nějaké další, třeba i lepší, tak se určitě pochlubte.

Hádanka pro webdesignery a kodéry. Vyřešíte ji?

Mám pro vás malou hádanku. Znáte to - takovou, kterou génius vyřeší na první pohled, inteligent za pár minut, polointeligent za hodinu a ostatní si nad ní můžou lámat hlavu třeba celý den.

Ukážu vám jednoduchou HTML stránku. Má primitivní kód, asi na deset řádek. Přesto se její podoba v prohlížeči zcela vymyká běžné webdesignerské logice. Vaším úkolem je zjistit proč. Proč stránka vypadá tak, jak vypadá.

Podotýkám, že problém není postaven na žádných tajných novinkách z HTML5 ani CSS3. Klidně ignorujte, že stránka má HTML5 doctype, fungovala by stejně i bez něj. Ona záhada nepoužívá nic, co přišlo později než staré dobré HTML4 z 1999. Nejedná se ani o fintu žádného prohlížeče - stránka skutečně má správně vypadat tak, jak vypadá.

Hádanka

Jedná se o stránku http://id.annevankesteren.nl/ a vaším úkolem je zjistit, proč vypadá jak vypadá, tj. proč má barevné písmo, pozadí, nebo text na dva řádky atd., ačkoliv běžná logika tvrdí opak.

Stránka by měla vypadat asi takhle:


Abyste ji takto viděli, použijte Firefox nebo Operu. Jakmile problém vyřešíte, poznáte proč. Ale znova opakuji, nejedná se o žádnou fintu prohlížeče, nýbrž opravdu jen o standardní chování.

Vaše odpovědi můžete psát do komentářů. Zatím je nechám neviditelné.

Řešení najdete v mém dalším příspěvku.

Opera 10.5 přinese lokální úložiště z HTML5

Dnes byla představena preview verze Opery 10.5. Obsahuje řadu novinek, např. dlouho očekávaný JS engine Carakan. Z pohledu HTML5 přináší jednu důležitou novinku a tou je podpora lokálních úložišť. Přesněji řečeno všech typů lokálních datových úložišť (nástupce cookies), definovaných v HTML5.

Web Storage

Web Storage zahrnuje localStorage a sessionStorage a umožňuje ukládat data v jednoduché podobě klíč - hodnota. Implementace najdeme již prakticky ve všech prohlížečích. Opera byla posledním prohlížečem, na který se ještě čekalo. Odhaduji, že cca do dvou let by se toto úložiště mohlo začít bez problému používat i pro široké nasazení. V tuto chvíli je lze bezpečně používat pouze s pomocí emulačních triků, které zajistí uložení dat v prohlížečích dosud nepodporujících Web Storage.

Web SQL Database (SQL5)

Webové úložiště postavené na SQL (někdy přezdívané SQL5) je složitějším úložištěm, které obsahuje jednoduchou SQL databázi. Zatím bylo implementováno pouze ve WebKitu (Safari, iPhone, Chrome) a v Google Gears. Opera tak přináší jeho v pořadí třetí implementaci. Na použití tohoto úložiště na webu si pravděpodobně počkáme ještě řadu let.

Jeho implementace v Opeře tak bude zatím zajímavá spíše pro tvůrce aplikací (widgetů) postavených na platformě Opera. Až se podpora dostane i do mobilní verze Opery, získají mobilní widgety pěknou databázi.

První verze akcelerovaného 3D v prohlížečích je na světě

Pod hlavičkou Khronos Group byl vydán první draft specifikace WebGL. K této aktivitě se hlásí Apple, Google, Mozilla i Opera (absence Microsoftu se u podobných aktivit již stala pravidlem).

Práce začala loni na jaře, kdy se výrobci sice již shodli, že akcelerované 3D na webu bude časem nutností, ale nebyli se schopni dohodnout, jak má toto rozhraní vypadat a začali si (téměř každý) vyvíjet své vlastní. Právě včas zasáhl Khronos Group, který přinesl nejen neutrální půdu pro přípravu nového standardu, ale také potřebné know-how (pod jeho patronátem se vyvíjí např. OpenGL). Zřejmě se jednalo o dobrou volbu, protože se výrobci prohlížečů (ti jmenovaní) přidali.

Chcete si to vyzkoušet? Máme implementace

Současně s první pracovní verzí specifikace jsou k dispozici i její první implementace. (Také začínáte mít pocit, že v Khronos Group to šlape poněkud lépe než u W3C?) Jedná se zatím o experimentální implementace dostupné jen pro testování. Jednu najdete v nočních buildech Firefoxu (návod, jak ji zapnout), další najdete v Chromiu a nočních verzích WebKitu.

Pro vyzkoušení nových 3D možností si zkuste dema nebo stránku x3dom.

Já tleskám a jdu si to také zkusit.

P.S.: Ještě k Microsoftu. Komunikace na Twitteru mezi Arunem (Mozilla) a Chrisem Wilsonem (Microsoft): upozornění, reakce, reakce, reakce.

Firefox 3.6 zlepší práci se soubory ve formulářích

Ve Firefoxu 3.6 se dočkáme dvou novinek týkajících se práce se soubory. Tou první je podpora uploadu více souborů najednou z jednoho formulářového pole po vzoru specifikace HTML5 (dříve WebForms2).

Zápis vypadá jednoduše:

<input type="file" multiple="">

v HTML variantě jej můžete zkrátit i na:

<input type=file multiple>

Pomocí JavaScriptu můžete ověřit, kolik souborů uživatel vybral nebo je (resp. jejich názvy) v cyklu projít (kolekce input.files a vlastnost input.files.length).

Více: ukázka, specifikace.

Sáhněte si na soubor

Tou druhou novinkou je možnost přistupovat přímo z JavaScriptu k obsahu souborů, které uživatel vybral k uploadu pomocí klasického <input type="file">. Dosud bylo totiž nutné takové soubory nahrát na server, z něj získat zpět a teprve pak s nimi šlo dále pracovat. Alternativou bylo použití pluginů, které umožňovaly přímou práci se soubory.

Z JavaScriptu bude pomocí nového API možné zjistit nejen název takového souboru, jeho typ a velikost, ale také přistupovat k jeho obsahu a to třemi asynchronními způsoby (dnes už je takový trend dělat všechny náročnější operace asynchronně, aby nedocházelo k zamrzání stránky v prohlížeči) :

• readAsBinaryString
• readAsText
• readAsDataURL
  

Zvolená metoda se váže na typ obsahu a co s ním chcete dělat. U textových souborů použijete readAsText. Pokud chcete pracovat s obrázky, ale nemáte v úmyslu je měnit, zvolíte readAsDataURL (následně do vlastnosti můžete img.src nastavit přímo tuto hodnotu a obrázek se zobrazí) atd.

Kompletní specifikace (poměrně čerstvá, první návrh přišel před pár týdny právě od Mozilly) počítá i s výše zmíněným přepínačem multiple (bude tedy možné např. označit všechny fotografie v adresáři a následně s nimi v JavaScriptu pracovat).

Firefox 3.6 zatím neimplementoval specifikaci celou, ale dost na to, aby si ji zájemci mohli vyzkoušet (stahujte Firefox 3.6 beta 4).

Více: video s demem, ukázka, specifikace.

Pozn.: Firefox 3.6 těch novinek přinese víc, ale pro účely tohoto příspěvku nejsou podstatné.

Pozn. 2: Specifikace je nová a zatím jsem nenašel reakce dalších prohlížečů, zda ji budou chtít podporovat nebo ne. Uvidíme.