neděle 28. září 2008

Ian Hickson: vlastnosti, které zoufale chcete, ale ještě nemůžete použít

Editor HTML5 specifikace, Ian Hickson měl minulé pondělí přednášku o HTML5, na které předváděl již hotové nebo probíhající implementace klíčových částí HTML5. Záznam celé přednášky nalezenete na Youtube.

Přednáška trvá hodinu a podává pěkný přehled o celé šířce záběru HTML5. Pokud vás zajímají jen některé části, tady je osnova přednášky:
  1. Úvod
  2. <video> (00:35)
  3. postMessage() (05:40)
  4. localStorage (15:20)
  5. sessionStorage (21:00)
  6. API pro Drag and Drop (29:05)
  7. onhashchange (37:30)
  8. Formulářové prvky (40:50)
  9. <canvas> (56:55)
  10. Validace (1:07:20)
  11. Dotazy (1:09:35)
Přednáška je velmi pěkná, pro její shlédnutí doporučuji jít přímo na Youtube, přepnout si na vyšší kvalitu a sledovat v celoobrazovkovém zobrazení. Uvidíte pak všechen předváděný kód.

Online najdete i všechny příklady z přednášky a komentáře k nim.

(Zdroj: Whatwg.org)

čtvrtek 25. září 2008

Proměnné v CSS - lesk a bída standardizace

Řada webdesignerů se těší na brzké zavedení proměnných do CSS. Návrh specifikace vznikl velice rychle, WebKit je již implementoval a ačkoliv někteří s jejich zavedením nesouhlasí, vše se zdálo být na rychlé a bezproblémové cestě (což je ve světě webových standardů dosti neobvyklé!).

K jejich rychlému zavedení je třeba, aby byla včas specifikace prohlášena za stabilní, a aby prohlížeče CSS promněnné implementovaly. Obojí spolu souvisí. Čím dříve bude specifikace hotová, tím dříve se může objevit v prohlížečích a naopak čím dříve se objeví v některých prohlížečích, tím dříve může být hotova. (Že by kruh? Ale tak to prostě je.)

Ovšem od úterý probíhá v diskusní skupině CSS WG debata, ze které vyplývá, že nic není tak růžové. Dave Hyatt píše, že implementaci z WebKitu odstranil, protože ačkoliv všichni proměnné v CSS chtějí, nedaří se dohodnout, jak má jejich implementace vypadat:
It's off pending a decision of any kind. :) The feature works well, but it seems everyone has his/her own idea of how this feature should work, and nobody has the same opinion. I'm basically disgusted at this point and giving up on the whole feature.
A dodává, že nechce, aby se do ostré verze Safari (nebo Google Chrome) dostaly CSS proměnné v podobě, která není dosud jistá, protože tak dlouho očekávaná novinka by se začala rychle používat a WebKit by ji pak musel podporovat navěky, i přestože by oficiální implementace vypada úplně jinak:
The problem with leaving CSS variables turned on in WebKit is that if the feature ships, it is going to be hugely popular. We know this. Whatever we ship, we will have to support on OS X forever, because apps on the platform will scramble to use this feature.
Já sice chápu Davevovu opatrnost, ale myslím si, že přesně takovéhle nejisté oblasti jsou doménou vendor prefixů. Je to vlastně jeden z důvodů, proč se vendor prefixy používají a Dave toho (dle mě zbytečně) odmítá použít.

Na druhou stranu i ostatní prohlížeče obsahují vlastnosti, které sice jsou naprogramované, ale z nějakých důvodů se do veřejných verzí nedostávají (ať již nejsou dost otestované nebo by mohly být kontroverzní, případně se čeká na specifikaci), takže Davův postup není nijak výjimečný.

Pro designery to znamená jediné: CSS proměnných se sice dočkáme, ale možná přijdou ještě o něco později.

Pro zájemce celé vlákno [Css Variables] Variable Declaration Blocks.

Lesk a bída standardizace

Standardizace je pomalý proces. Sejde se vám kupa odborníků, každý má na věc jiný názor, no a teď standardizujte. Hlavně ale nepočítejte s tím, že se během pár měsíců na něčem dohodnete! Dejte si raději rezervu jednoho roku. Minimálně! Jen několik měsíců může trvat výběr správného názvu jednotlivých funkcí!

V HTML5 funguje (ano, skutečně to funguje!) metoda osvíceného diktátora. Všichni se pár týdnů o podobě nové vlastnosti hádají, pak si Ian Hickson sedne, sepíše návrh specifikace a zveřejní ji (tedy de facto rozhodne sám a za sebe, byť na základě návrhů ostatních). Následně se všichni hádají o jeho návrhu a objeví se pár blogpostů, že Hickson celou skupinou manipuluje a nikdo kromě něj nemá na specifikaci vliv, nebo někdo ze skupiny protestně odejde.

Hickson ty nadávky igronuje a podívá se na kritiku návrhu, vybere z ní nejlepší myšlenky a svůj návrh podle nich přepíše. Tohle kolečko se ještě dvakrát zopakuje a ve výsledku tu je specifikace, se kterou naprostá většina zúčastněných souhlasí a je s ní spokojená.

Existuje i další "standardizační" proces, kdy se výrobci jednoho prohlížeče pro něco rozhodnou, rychle to naimplementují a vydají. Druhý prohlížeč to naimplementuje taky (někdy trochu jinak, protože ten první prohlížeč k tomu nedal pořádnou specifikaci) a než se nadějeme, používáme to všichni. Je to sice plné problémů, je to návrh, za který se někde i vyhazuje od zkoušky, ale světe div se, vývojáři jsou rádi, že aspoň něco mají.

Tak a teď si vyberte!

Máme tu několik špatných cest. Jenže tu dobrou cestu nikdo nezná, a tak se vývoj webu často odehrávách na těch cestách, které jsou zrovna v tu chvíli z těch všech špatných ty nejméně špatné.

Vzpomeňte si na to, až zas někde uslyšíte, že Ian Hickson je diktátor, nebo že prohlížeč XY implementoval cosi svého. Netvrdím, že je to správné, ale někdy to může být to nejlepší řešení.

středa 24. září 2008

Budou HTML formulář přímo přistupovat ke kameře?

Brad Lassey ve svých úvahách o mobilní verzi Firefoxu dospěl k zajímavému nápadu:

<input type=”camera” />

Posílání videí (nebo i fotek) pořízených z kamer připojených k počítači roste. (A to už vůbec nemluvím o mobilních telefonech!) Proč celý proces neusnadnit a neintegrovat do webového prohlížeče? Potřebujete nahrát do svého profilu na Facebooku fotografii? Stačí kliknout na input, vyfotit se a prohlížeč výsledek odešle. Když prohlížeče dokážou přehrávat <video>, proč by jej neměli umět také vytvářet?

Daniel Glazman zdůrazňuje několik bezpečnostních aspektů, ale s nápadem souhlasí a navrhuje začlenit ho do HTML5.

V HTML5 konferenci (resp. ani v jedné z těch dvou konferencí) se návrh zatím neobjevil. Jsem zvědav. Já bych pro něj hlasoval všemi deseti. Bylo by nutné zajistit, aby mohl být ve starších prohlížečích emulován klasickým <input type="file">, ale to je tak všechno.

BTW Jistě není náhodou, že se tento nápad objevil krátce po virální akci blogerů Mozilly.

neděle 21. září 2008

Když si Firefox zapingá

Firefoxu 3 implementoval atribut ping z HTML5. Možná jste si toho ale vůbec nevšimli. To proto, že podpora pingání je po instalaci vypnuta. Pokud ji chcete zapnout, nastavte na stránce about:config předvolbu browser.send_pings na hodnotu true.

K čemu je takové pingání dobré? Pokud se pozorně podíváte prakticky na jakýkoliv vyhledávač, zjistíte, že na stránce s výsledky hledání pečlivě monitoruje, na které nalezené odkazy klikáte a na které ne.

(Úkol pro zvídavé: Podívejte se, jak takový monitoring dělá Google, jak Seznam a zamyslete se, proč je způsob zvolený Seznamem rychlejší, byť méně přesný. A také proč oba vyhledávače zapomněly na uživatele nepoužívající myš.)

Monitoring klikání na odkazy se ovšem nehodí jen pro vyhledávače. Když jsme kdysi v CZille přemýšleli, jak udělat počitadlo stažených Firefoxů z našich stánek, došli jsme také k pingacímu řešení. Prosté logování hitů na stahovaný soubor nelze použít, v tom se vám projeví i roboti.

Pingání
tak není jen pro velké firmy s vyhledávači, ale prakticky pro každého, kdo monitoruje pohyb uživatelů na svých stránkách. Předpokládám, že nástroje jako Google Analytics budou atribut ping po jeho zavedení také využívat.

Proč zavést ping atribut?

Pokud se některá technologie hojně používá a její použití (správný zápis) je zbytečně komplikované, mělo by se zjednodušit. Pokud jste se dívali, jak mají pingání implementováno i Googlu a Seznamu, asi uznáte, že o jednoduchosti se nedá hovořit. Jenže ono to zatím o moc líp udělat nejde.

A přesně to řeší atribut ping u odkazu (nebo u značky area). Jeho použití je snadné:

<a ping="http://www.example.cz/ping" href="http://www.example.cz/">Odkaz</a>

Pokud uživatel přejde na odkaz, je zároveň poslán požadavek na adresu uvedenou v atributu ping. Pokud je v atributu ping uvedeno více adres oddělených mezerou, pošle prohlížeče požadavek na všechny uvedené adresy.

Požadavek je zaslán metodou POST a pokud adresa v atributu ping a adresa aktuálního dokumentu jsou ze stejné domény, pošlou se v požadavku i další hlavičky: Ping-From a Ping-To (obsahuje adresu odkazu, na který uživatel přechází).

Výhody
  • Již zmíněná jednoduchost.
  • Přesnost - mechanismus funguje i pro uživatele bez myši, dokonce i pro uživatele bez JavaScriptu. (Přesnost pochopitelně bude platit jen v případě, že všechny prohlížeče atribut ping implementují.)
Implementace ve Firefoxu

Atribut ping byl zatím implementován jen ve Firefoxu 3. Jedná se spíše o implementační experiment sloužící pro zpětnou vazbu při tvorbě HTML5 specifikace a ve výchozí instalaci je vypnut.

Všiml jsem si, že Firefox posílá požadavek pouze na první adresu v atributu ping. Pokud je jich víc, ponechá ostatní bez odezvy (to je chyba v implementaci).

Soukromí uživatelů

A co na to uživatelé? Co když se jim takové sledování nebude líbit? Pokud byli paranoidní, pomohl jim vypnutý JavaScript, atribut ping ale funguje i bez JavaScriptu.

Myslím, že uživatelé můžou klidně spát. Pravděpodobně každý prohlížeč nabídne možnost atribut ping vypnout. Ať již pro běžné používání nebo v soukromém módu (přezdívaném porno mód), který se dnes již stal standardem a dříve či později jej budou obsahovat všechny prohlížeče.

Přesto se nemůžu zbavit pocitu, že se prohlížeče tomuto atributu vyhýbají. Jeho implementace je velmi jednoduchá, ale kromě Firefoxu se do ní zatím nikdo jiný nepustil. Že by byly opatrní a nechtěly být označeni za prohlížeč omezující soukromí uživatele? Kdo ví!

čtvrtek 18. září 2008

Ukázka podpory videa ve Firefoxu 3.1

Vývojová verze Firefoxu 3.1 Alfa 2 podporuje značky video a audio z HTML5. Já se jí podívám trochu na kobylku podobně jako jsem to před půl rokem udělal se Safari. Implementace sice není kompletní a obsahuje chyby (jednou se mi podařilo prohlížeče dokonce shodit), ale pro základní popis obou značek prozatím postačí.

Pokud chcete vidět rovnou celý výsledek, zobrazte si testovací stránku, já zde jednotlivé možnosti značek <video> a <audio> rozeberu podrobněji.

Video

Začneme videem, protože je zajímavější. Firefox v tuto chvíli podporuje pouze formát OGG Theora, v budoucnu by se mohlo spektrum rozšířit, ale to není zajím ještě jasné. Diskusi o formátech nechám na jindy, dnes se soustředím na kód HTML a JavaScriptu, kterým se video vkládá a ovládá.

Vzal jsem HTML5 trailer (krátké video, které jsem loni vyrobil) a převedl jej pro účely výkladu do OGG formátu. Má asi 5MB, proto pokud máte pomalé spojení, vydržte, až budete zkoušet příklady níže, než se poprvé načte. Pro další zobrazení by už měla zafungovat cache.

A můžeme udělat první pokus: zobrazit video v prohlížeči. Tady Firefox trochu zklamal, pokud mu video předložím přímo, nabídne mi stažení, ale netváří se, že by je uměl zobrazit (na to jsem se těšil). Škoda, takže pro zobrazení videa musíme vytvořit webovou stránku, do které video vložíme. (Pro srovnání u obrázků to není nutné, ty prohlížeč dokáže zobrazit i přímo, nepotřebuje k tomu webovou stránku).
  • Nejjednodušší příklad vložení - k vložením nám stačí značka video s nastaveným atributem src. Musíme pamatovat na přístupnost a pro prohlížeče, které značku video nepodporují, vložíme tzv. fallback obsah, který zobrazí místo videa. V našem případě postačí, když dovnitř značky video vložíme odkaz ke stažení. JENŽE video nám jaksi nefunguje že? Po načtení ze zobrazil první snímek, ale ne a ne se spustit. Inu zatím jste ho zobrazili, ale ještě nespustili.
  • Vložení s ovládacími prvky - přidáme atribut controls. Prohlížeč nám má nyní nabídnout ovládací prvky. A můžeme si video spustit. Video nám krásně běží a můžeme si je i zastavit. Všimněte si, že ovládací prvky jsou vykresleny plně v zobrazované oblasti videa, nijak nezasahují do okolní stránky (webdesigner tedy nemusí řešit který problížeč jak prvky vykreslí, nezajímají ho). BTW doufám, že je stávající podoba jen dočasná, protože se Safari, které zobrazí kompletní ovládací prvky včetně pozastavení videa, timeline, rychlého převinu a vypnutí zvuku, se nedá srovnat. Aktualizováno: Pracuje se na zlepšení.
  • Malá varianta s autoplay - předchozí příklad, ale s přidaným atributem autplay, jehož význam jste jistě odhadli.
  • Ovládáme video sami - pokud nechceme, aby ovládání zajišťoval prohlížeč, žádný problém. Když ale nevložíme atribut controls, musíme ovládací prvky nabídnout uživateli sami (jinak video nedokáže ani spustit, natož již spuštěné video zastavit). V tomto příkladu uvádím tu nejjednodušší možnost (kliknutím na video je spustíte nebo naopak zastavíte), v reálu bychom zvolili nějakou intuitivnější metodu, např. umístění pěkných tlačítek pod videem.
  • Nastavení rozměrů - video je klasický blok, můžeme mu vnutit jakékoliv rozměry (a za pomoci SVG nebo CSS transform jím dokonce otáčet).
Značka video toho umí víc, ale jedná se buď o pokročilé vlastnosti nebo o vlastnosti, které Firefox zatím neimplementoval (zobrazení posteru, obsluha událostí atd.). Necháme si je proto na jindy. Pokud jste z Brna a okolí, můžete si přijít poslechnout mou přednášku na konferenci LinuxAlt 2008, kde se toho dozvíte víc a nejen o videu.

Audio

Firefox podporuje opět jediný kodek a to OGG Vorbis. Podobně jako u značky video není zatím ani podpora značky audio kompletní. Postačí nám proto jen jedna ukázka
  • Ukázka audia - na zobrazené stránce sice nic neuvidíte, zato uslyšíte hudbu na pozadí. To proto, že jsem přidal atribut autoplay. Bez něj byste mohli hudbu spustit (a opět zastavit) JavaScriptem. Dalším řešením by bylo přidat atribut controls, který by měl podobně jako u videa uživateli zobrazit ovládací prvky. Ten ovšem ve Firefoxu zatím nefunguje.
Když prohlížeč nejde ztišit

Malé zamyšlení. Jak se poslední příklad zachová, pokud budete mít vypnutý JavaScript?

Podobně jako v Safari se obsah značky audio spustí, i když je vypnutý JavaScript (to je správně) a toto chování nejde změnit (to je špatně).

Doufejme, že než se podpora audia dostane do ostré verze, tak se nějaké nastavení objeví. Jinak by to totiž znamenalo konec poslední tiché bašty. Dosud jste měli možnost, pokud jste chtěli prohlížet web v tichosti, vypnout JavaScript, pluginy a měli jste celkem jistotu, že vás prohlížeč nevyruší. S příchodem značky audio tato jistota padá. Doufejme, že se v prohlížečích objeví aspoň možnost i tento mediální obsah vypnout.

A tím končí dnešní stručné představení značek <video> a <audio>. Více najdete v HTML5 specifikaci v sekcích Video Element, Audio Element, Media Elements a Source Element.

Jak vytvářet OGG Theora

Dotatek pro ty, kdo chtějí vytvořit video s kodekem OGG Theora a neví jak. Stačí když:
  • stáhnete ffmpeg2theora
  • zkonvertujete jím existující video (z příkazové řádky takto: ffmpeg2theora video.avi)
  • výsledek můžete přehrát třeba ve Firefoxu 8-) nebo si stáhněte přehrávač VLC, případně samotný kodek

úterý 16. září 2008

WebForms2 migrují do HTML5

Ian Hickson nedávno zahájil migraci specifikace WebForms2 do HTML5.

WebForms2 je samostatnou specifikací (z historických důvodů) a ačkoliv Ian dříve přislíbil její začlenění do HTML5, dosud neproběhlo. Pravděpodobně, protože John Boyer, předseda Forms WG, k ní měl loni vážné námitky. Za tím účelem byla vytvořena Forms Task Force, která měla problémý vyřešit. Nevšiml jsem si žádného veřejného výstupu, jejich mailová skupina za celý rok poměrně zeje prázdnotou.

Jsem zvědav, jak bude specifikace po začlenění vypadat, Ian v ní nyní provádí drobné úpravy a v nedávném rozhovoru naznačil, že dojde k vypuštění některých částí. Předpokládám, že tak za měsíc budeme moudřejší.

WebForms2 se poslední rok nacházela v patové situaci. Tím, že k ním měl předseda Boyer vážné připomínky, se z ní stal černý Petr, kterého nikdo nechtěl implementovat. No, implementovali byste něco, co se možná zítra změní a vy nevíte, zda kompletně nebo jen trochu?

Začleněním do HTML5 se situace vyjasní a prohlížeče budou mít volnou cestu k implementaci WebForms2. V tuto chvíli jsou WebForms2 implementované pouze v Opeře.

pátek 12. září 2008

Debata o atributu alt se snad chýlí ke konci. A říká...

Máme tu pokračování seriálu, jehož hlavním hrdinou je atribut alt a zápletka se náramně podobá filosofické otázce "Být či nebýt". (Můžete si připomenout předchozí díly.)

Ian Hickson pečlivě prošel všechny diskutované připomínky a nabízená řešení. Slovo "pečlivě" jsem zdůraznil, protože prostudování Ianova e-mailu vám chvíli potrvá. Obsahuje detailní rozbor problematiky a více jak 20 (!) možných řešení (ne)povinné existence altu. Nevěříte, že jich tolik existuje? Jen si to celé přečtěte, pokud máte čas. Ian ovšem také analyzuje jejich nedostatky a postupně je jedno po druhém zavrhuje.

Až na jedno!

Ian se pokusil najít kompromis a podařilo se mu získat větší příznivou odezvu než kdykoliv před tím. Než onen kompromis přednesu, zkusím vysvětlit, proč byl problém nepovinného altu vůbec otevřen. Jsou tu dva důvody, Web ani HTML už nejsou totéž co kdysi.

Důvod první

Web dnes není stejný jako v devadesátých letech, kdy se obrázky a alt zaváděly. Uživatelé na web nahrávají své fotky, přibývá počet fotogalerií. Kdo ví, možná se už dokonce fotka z víkendu nebo dovolené stala převažujícím typem obrázku na celém webu (podklady pro to nemám, ale pokud to nenastalo dnes, je asi jen otázkou času, kdy to přijde). Většina těchto fotek nemá atribut alt vyplněn a pokud ho vyplněn má, tak genericky (alt="Photo 45678").

Autor webu (fotogalerie) s tím nemůže nic dělat. Vlastními silami není schopen popisky desetitisícům fotografií doplnit. Museli by je doplňovat uživatelé. Ovšem, který z nich by chtěl po krásně prožité dovolené dopisovat popisky k desítkám nebo stovkám fotografií? Kdo ho může nutit?

To znamená, že možná již nejrozšířenější použití značky img se úvahám původních HTML specifikací trochu vymyká. Jasně, může se všude použít alt="", ovšem co když jednou budou fotogalerie čítat 90% obrázků na webu (a k tomu může dojít)? Bude i pak povinný alt správné a optimální řešení?

Přemýšlím dokonce, zda nevidomý člověk nutně potřebuje alternativní informaci u fotogalerií. Teď se vrhám na tenký led, ovšem myslím, že některé bariéry prostě překonat nedokážeme. Má pro nevidomého člověka smysl, aby při procházení fotogalerie četl: "já na mostě", "já nasedám do autobusu", "já jsem si koupila nový klobouk", "já...".

Jiný případ je, pokud vezmeme fotografii a použijeme ji jako doplnění nějakého textu. Tam jistě alternativní popis fotografie smysl má, obzvlášť, pokud text doplňuje nejen esteticky, ale i informačně, např. v textu píšu o veselé náladě na oslavě narozenin a na fotografii je vidět, že během zábavy si někteří pánové nasadili klaunské nosy, namalovali klaunskou pusu a vesele spolu tančí. Nenapsat to do popisku obrázku, pak nevidomý člověk přijde o část celého sdělení. A to byla škoda. Ovšem pokud vystavím fotogalerii všech 100 fotek z narozenin, zřejmě k nim nebudu přidávat takto podrobné popisky a asi by to ani nemělo velký smysl. Mnohem lepší bude, když o průběhu narozenin prostě něco pěkného napíšu. (Teď mě napadlo, že nejlepším alternativním obsahem fotogalerie asi nejsou popisky, ale článek. Nicméně neodbíhejme.)

Tento první důvod by sám o sobě ke zrušení povinného altu nestačil, ale je to dobrý důvod k zamyšlení. Pokud hrozí, že dnes nebo za pár let nebude mít smysl u většinového použití značky img vyplňovat alt, máme na altu stále trvat?

Hlavní protiargument zrušení povinného altu je, zda by to neohrozilo jeho používání tam, kde je nutný. Aneb alt se webdesigneři často naučí používat, protože jim vynadá validátor. Když jim nadávat přestane, kdo je to naučí?

Důvod druhý

Důvod druhý souvisí nikoliv s evolucí Webu, ale s evolucí HTML. HTML5 obsahuje nové konstrukce, které umožňují poskytnout alternativní obsah obrázku jinak, pro některé případy vhodnějším způsobem. Příkladem je značka figure, která propojí text s obrázkem:

<figure>
<img src="DSC_0399.JPG">
<legend>Tanečník u tyče s tričkem <a href="http://www.google.cz/">Googlu</a> vábí nové klienty</legend>
</figure>

Na rozdíl od altu, který je ALTERNATIVNÍM obsahem obrázku, je obsah značky legend jak alternativním obsahem obrázku, tak popisem obrázku pro všechny čtenáře. U obrázku v takové formaci nedává atribut alt smysl. Mělo by vůbec cenu značku figure zavádět, když by bylo nutné stejně alt (byť prázdný) vkládat? Neříkal by prázdný alt čtečkám, že alternativní informace neexistuje, místo aby je navedl na obsah značky legend?

Takže ten kompromis

Jak Web, tak HTML se nám vyvíjí a u atributu alt je třeba hledat řešení, které bude tento vývoj respektovat, ale zároveň neohrozí přístupnost Webu. A Ian po měsících debatování v HTML WG přišel s tímto kompromisním řešením:

Atribut alt může být vynechán pouze a jen v případě, že je alternativní obsah obrázku nabídnut jiným způsobem (např. značkami figure+legend nebo atributem title). V ostatních případech je alt povinný.

Možná vám tohle řešení připadne komplikované, ale jednodušší se už zřejmě nedá nalézt. A já mám takový pocit, že tohle řešení by už do finální specifikace mohlo projít. I když, raději si ještě počkáme.

Jo a řvaní validátoru nad absencí alternativního popisku se nezbavíme, protože jak alt, tak i ty alternativní způsoby si dokáže pěkně pohlídat.

Další čtení:

úterý 9. září 2008

Canvas a pěkné obtékání obrázku

Obtékání obrázků (a čehokoliv jiného) je v kaskádových stylech řešeno na úrovni bloků. Na papírovém médiu se ale můžeme setkat i s jemnějším obtékáním, které respektuje nepravidelný tvar obrázku.

Jacob Seidelin se pokusil jemný druh obtékání nasimulovat pomocí běžného HTML+CSS s pomocí JavaScriptu a canvasu. Stačí, abyste do stránky vložili obrázek s průhledným pozadím, nastavili mu správnou třídu (v našem případě "sandbag-left") a jednoduchý skript PrettyFloat se o zbytek postará.

Výsledek je celkem přesvědčivý (zatím jen ve Firefoxu a Opeře).

Jak to funguje? Canvas umožňuje přistupovat k obrázkům na úrovni jednotlivých pixelů. Skript zanalyzuje obrázek a nahradí jej sadou divů o výšce cca jednoho řádku textu, každému z nich nastaví adekvátní šířku a na pozadí napozicuje původní obrázek tak, aby jednotlivé divy daly vizuálně dohromady obrázek původní. Vše proběhne při onloadu a rozumně rychle. Mechanismus je postaven na metodě, která byla prvně popsána na Alistapart.

Vše se řídí pravidlem graceful degradation (v ostatních prohlížečích uvidíte klasické obtékání).

Nejedná se o jediný způsob zpracování obrázku pomocí canvasu, našli bychom knihovny na zaoblování rohů, vytváření zrcadlových obrazů atd. Přemýšlím, zda se podobné metody jednou ujmou stejně jako je dnes běžný SIFR.

Pozn.: Nejedná se o univerzální způsob, prohlížeč totiž povolí v canvasu zpracovávat jen obrázky ze stejné domény. Porušit toho omezení je nežádoucí (na pozadí by prohlížeč mohl např. lámat cizí captchy a uživatel by o tom neměl ponětí).

(Zdroj: nihilogic.dk)

středa 3. září 2008

Firefox implementuje drag & drop z HTML5

Poslední noční buildy Firefoxu obsahují podporu pro drag & drop z HTML5. Naprogramování drag & drop bylo dříve v prohlížečích poněkud komplikované (bylo nutné odchytávat události myši, detekovat, že uživatel chce s prvkem vůbec hýbat, vykreslovat jeho posunování a znovu detekovat, kam byl spuštěn).

Specifikace HTML5 obsahuje API, které je mnohem jednodušší. Rozhraní nenavrhli autoři specifikace, nýbrž vývojáři Internet Exploreru. Jedná se o další případ, kdy se HTML5 snaží standardizovat prohlížečem zavedené rozšíření. Nové rozhraní po Internet Exploreru implementovalo Safari a nyní došlo i na Firefox.

Rozhraní definuje nové události:
  • drag
  • dragstart
  • dragenter
  • dragleave
  • dragover
  • dragend
  • drop
a řadu obslužných metod např. setDragImage nastaví obrázek, který bude uživateli zobrazovat, že právě "něco myší tahá".

Nedaří se mi najít najít žádné funkční demo, leda tento příklad, který nevím proč nefunguje. Navíc whatwg.org je dnes nedostupný (všichni zkouší nový prohlížeč od Googlu, chtějí testovat na acidtests.org a přetížili tak Hixieho server). Větší rozbor tedy necháme na jindy, zatím si můžete přečíst dokumentaci u Mozilly.

Aktualizace: Našel jsem příklad, který funguje (zatím alespoň v IE a Safari).

(Zdroj: Xulplanet.com)