Proč zrovna modré čepice?

Weboví weteráni wí, že asociace mezi webovými standardy a modrou čepicí tu je na počest Jeffreyho Zeldmana, který se posílení webových standardů věnoval hodně úsilí. A to nejen ve své knize (zobrazena výše), ale i pomocí Web Standards Project, který sám založil, nebo pomocí magazínu A List Apart, u jehož založení také stál.

Svou podporu můžete dát najevo účastí v události na Facebooku. A pak hlavně tím, že si v patřičný den do svých profilů na Facebooku, Twitteru či kdekoliv jinde dáte svoji fotografii v modrém kulichu čepici.

Vzkaz od Jeffreyho:  Don’t forget Blue Beanie Day!

Tak nezapomeňte, už tohle úterý!

S WebGL nebude problém zobrazit vše, na co jsme byli zvyklí, elegantně přímo pomocí prohlížeče.

Nevěříte? Podívejte se na webový 3D modul ChemDoodle. (WebGL je zatím v experimentálním stádiu, pro použití ve vašem prohlížeči postupujte dle návodu.)

A pokud si už podporu WebGL zapnete, nezapomeňte se podívat na další ukázku možností - např. slušně rendrovaný level z Quake 3D.

Více o WebGL (neboli OpenGL for Web) najdete v článku Letošek bude prvním rokem 3D na Webu.

Vzpomínáte na všechny ty pokusy emulovat 3D v JavaScriptu? Na javascriptového Wolfensteina, Dooma nebo 3D šachy? Není to dávno, co se objevily první vážné pokusy přenést 3D přímo do prostředí Webu.

Tím přímo myslím, že se jednak stane součástí stránky, bude s ním možné manipulovat z JavaScriptu, ale zároveň si zachová všechny důležité parametry (např. využití akcelerace grafických karet).

První pokusy Firefoxu a Opery s 3D moc úspěšné nebyly (a nejspíš si na ně už ani nevzpomenete), navíc nebyly mezi sebou kompatibilní. Pozdější projekt O3D od Googlu si již pozornost zasloužil, ovšem jednalo se jen o plugin a i ten byl s ostatními nekompatibilní.

Khronos vládne všem, Khronos jim všem káže

Pořádek nastolila až skupina Khronos (z její dílny pochází i standard OpenGL), která během minulého roku stihla vytvořit první pracovní verzi specifikace WebGL (čili OpenGL pro Web). K vykreslení 3D používá HTML značku canvas, která byla pro podobná vykreslování od začátku určena. Pro přepnutí canvasu do 3D režimu stačí zavolání canvas.getContext( "webgl" ).

Podstatné je, že se skupina Khronos současně dohodla s výrobci prohlížečů (až na Microsoft v zásadě se všemi). Rozepsal jsem se o tom v článku na svém druhém blogu HTML456, ale vás teď určitě zajímá tohle video:

Na video upozornil @ajaxian

Líbí? Vše z videa si můžete vyzkoušet sami na Demu GLGE, pokud máte build prohlížeče s experimentální podporou WebGL.

Všimněte si při tom, že se nejedná jen o nějaký hloupý 3D model. Při procházce zahradou nemůžete např. snadno projít skálou, nýbrž pohybový mechanismus vás navede podél ní, jak je u moderních 3D her zvykem.

Z Blenderu na 3D Web

Vaší pozornosti by nemělo ujít, jakým způsobem bylo toto demo připraveno. Bylo totiž vytvořené v Blenderu, ze kterého existuje export do XML formátu, jenž umí zpracovat javascriptová knihovna GLGE. Demo z videa najdete popsané v tomto XML souboru.

Vytvořili jste někdy v Blenderu něco pěkného? Zkuste to schválně najít a vyexportovat pro GLGE. Funguje to?

WebGL přichází

Vše potřebné je tedy na světě. Během tohoto, maximálně následujícího roku se implementace WebGL objeví ve stabilních verzích většiny prohlížečů. A můžeme jen doufat, že mezitím někdo napíše emulační vrstvu pro běh v IE (podobně jako Google vytvořil emulační vrstvu pro běh 2D canvasu v IE). K emulaci může použít jak 2D projekci do VML (to by bylo ovšem pomalé), tak třeba Flash (tam by rychlost už snad mohla stačit).

Pokrok nezastavíš. Ještě před rokem mě 3D na Webu naplňovalo velkou skepsí. Před půl rokem jsem už cítil jistou naději. Dnes to beru jako hotovou věc a zbývá již jen mechanické čekání na dobu, kdy to bude všechno hotové a běhat mezi uživateli.

Vývoj letí kupředu už teď. Vedle knihovny GLGE z dema tak vznikají další knihovny pro WebGL, např. SceneJS nebo X3DOM. Vznikají už i vizionářské ukázky, nebude tak problém skloubit WebGL s touch-screen ovládáním na mobilu apod. Zajímavé novinky se objevují každý týden, pokud o nich chcete vědět pravidelně, je tu blog Learning WebGL, pokud vám stačí občasné shrnutí, čtěte tento blog a vedle něj HTML456.

Co zbývá dodat?

WebGL rules!

Ještě shrnutí důležitých odkazů:

• draft specifikace WebGL
• 3D prohlížeče ke stažení (čtěte i návod, jak 3D správně zapnout)
• demo z videa
• další dema
• knihovna GLGE

Jedná se o překlad Simply JavaScript (SitePoint, 2007), jejímiž autory jsou Kevin Yank a Cameron Adams. Oba mají za sebou již několik napsaných knih, navíc první z nich je technickým ředitelem SitePointu a na scéně webových vývojářů poměrně známá osoba.

Kniha Začínáme s JavaScriptem je zaměřená na kodéry, kteří relativně dobře znají HTML a CSS, ale o JavaScriptu (a programování obecně) neví zhola nic a potřebovali by. Takových je jistě dost. Kniha může něco nabídnout i těm, kteří JavaScript již občas používají, ale zhruba platí, že čím větší jsou vaše znalosti, tím méně vám kniha dá.

Obsah

Po úvodní kapitole vysvětlující výhody oddělení obsahu, vzhledu a chování na webu následuje miniaturní obecný úvod do JavaScriptu. Tím teoretické základy končí a následující část knihy je již ryze praktická. Nejprve se čtenář naučí přistupovat k dokumentu a modifikovat jej, pak přijdou na řadu události. Následují kapitoly o animacích (na nich se čtenář naučí vytvářet delší skripty neblokující prohlížeč) a práci s formuláři. Kniha je zakončena kapitolami o AJAXu, ladění skriptů a přehledu aktuálních a blížících se trendů. Vše s ohledem na podporu v nejrozšířenějších prohlížečích (včetně i takového Safari).

Nedá se říct, že by problematika byla probrána příliš do hloubky, ale to není cílem knihy. Je probrána tak akorát, aby čtenář mohl začít JavaScript používat a poradil si s problémy, na které může narazit.

Velmi chválím kapitolu o ladění skriptů, která začátečníkům pomůže ušetřit hodně času, až narazí na první problémy. Speciální pochvalu uděluji za zohlednění přístupnosti, které provází celou knihu. Je málo učebnic JavaScriptu, které by braly v úvahu i screenreadery a správné používání JavaScriptu s ohledem na ně; kniha Začínáme s JavaScriptem je jednou z nich.

Co se týče používání frameworků, zde je kniha poplatná roku anglického vydání (2007). V knize jsou sice základní javascriptové frameworky občas předvedeny, ale jen pro rozšíření obzoru. Vždy je primárně popisováno přímé používání DOMu, dokonce během knihy čtenář vytváří jakýsi vlastní jednoduchý framework. To není na závadu, ale zdůrazňuji to zde proto, že někteří čtenáři by dnes již mohli používání frameworků striktně vyžadovat.

Kniha chce být cool

Je zaměřena na mladou generaci a snaží se být cool, kde to jen jde. Jak se to projevuje?

• První program tak nevypisuje "Hello world!", nýbrž "Arnie říká ahoj!" (Arnie to jako Arnold Schwarzeneger),
• narazíme na slůvka jako h4x0r,
• javascriptové pole je popsáno jako polička s cédéčky,
• podmínky jsou vysvětlovány na příkladech s věkem (např.  if (age > 17 && age < 21) {alert("Dost starý, aby mohl volit, ale moc mladý, aby mohl nasávat.");} ) a plná řady dalších výroků jako
• "pojídat ovčí mozečky" nebo
• "mohli byste z něho dostat tik do oka", případně
• "přesedneme do jiného auťáku" nebo
• "no to je hustý" a další.

Díval jsem se pro jistotu do originálního vydání, zda je psáno stejným stylem. Opravdu je. Tímto vzdávám hold překladateli, panu Janu Pokornému, který se s oněmi výrazy úspěšně popral, když je musel převést do českého vydání, ačkoliv něco takového nemusel při překladu knihy o programování vůbec předpokládat.

Onu "coolovost" nepovažuji za chybu nebo problém. Dovedu si představit, že někdo se nad tím vůbec nepozastaví nebo to přesně takhle chce. Z opatrnosti ovšem rozhodně doporučuji před koupí přečíst několik stran knihy, abyste si ověřili, že vám tento poněkud neobvyklý styl vyhovuje. Já se při čtení docela bavil 8-)

Co se už Zoner Pressu poněkud nepovedlo je obálka knihy, která obsahuje špatný název "Začínáme JavaScript" místo správného "Začínáme s JavaScriptem" (viz obrázek knihy výše).

Údaje o knize

Autoři: Kevin Yank a Cameron Adams
Název: Začínáme s JavaScriptem
Překlad: RNDr. Jan Pokorný
ISBN: 978-80-86815-94-7
Rozsah: 336 stran
Rok vydání: 2008
Vydal: Zoner Press
Cena: 340,-

iXEdit

Nástroj iXEdit si klade za cíl oživení webu bez jakéhokoliv kódování. Vše si jednoduše naklikáte. Nemožné? Podívejte se pozorně na následující video:

Mám z toho dobrý pocit. Zkusím schválně iXEdit doporučit známým, kteří JavaScript neumí a uvidím, zda jim pomůže. Pochopitelně s ním neudělají žádné velké zázraky. Ale právě takové to drobné oživení stránek je přesně to, na co jej užijí.

Tvůrci jej doporučují na prototypování webů. Jasně, tam se také bude hodit. Schválně ho vyzkoušejte sami.

BTW Pokud přemýšlíte, proč hlas komentující video pochází z hlasového syntetizátoru (mimochodem dobrého), pak napovím, že tvůrci pochází z Japonska.

Za tip na iXEdit děkuji Danu Dočekalovi.

Proč zrovna modré čepice?

Weboví weteráni wí, že asociace mezi webovými standardy a modrou čepicí tu je na počest Jeffreyho Zeldmana, který se posílení webových standardů věnoval hodně úsilí. A to nejen ve své knize (zobrazena výše), ale i pomocí Web Standards Project, který sám založil, nebo pomocí magazínu A List Apart, u jehož založení také stál.

Jak se zapojit?

Na některých místech na světě v ono pondělí proběhnou fyzická setkání. Ovšem můžete se zapojit i tak, že na váš blog, Facebook, Twitter, nebo kamkoliv jinam nahrajete fotografii vás v modré čepici. Pokud žádnou nemáte, použijte tuhle nakreslenou. Ve skupině na Flickeru můžete vidět fotky některých příznivců. Podobně při sledování #bbd09 na Twitteru. Největší příznivci pak vyjdou v pondělí v modré čepici i do ulic.

A co vy? Zapojíte se? Pošlete odkaz na vaši fotku.

Co dělat na OneWebDay? Slavit a rušit IE6

Tak rozhodně můžete slavit, máte pro to dnes speciální důvod 8-) Krom toho můžete zkusit udělat i něco prospěšného pro web, např. upgradovat alespoň jeden počítač s IE6 na nějaký lepší prohlížeč. Neberte to na lehkou váhu. TADY JDE PŘECI O ZDRAVÍ SAMOTNÉHO INTERNETU! Viz Internet Health Check.

A jak již řekl přímo Microsoft: "Kamarád nenechá kamaráda používat IE6". V tom byste měli Microsoft opravdu poslechnout.

Podpořit OneWebDay můžete i tichým způsobem, prostě si na dnešek změňte ikonu na vašem Twitteru nebo Facebooku.

A pokud se budete nudit, můžete si pustit videozpovědi ostatních účastníků nebo přidat svou vlastní.

Ve světě se pořádají akce, u nás zatím nic zaregistrovaného není, ale možná ještě není pozdě nějakou večerní oslavu vytvořit.

BTW OpenWebDay vymyslela Susan P. Crawford, která dnes dělá odbornou poradkyni prezidentu Obamovi.

Nezbývá, než se radovat z maličkostí. Naposled mě potěšila jedna taková maličkost, která českým odborným médiím zatím uniká - Flexible Box Layout. Idea stavby layoutu pomocí vboxů a hboxů je desktopovým vývojářům moc dobře známá, ale na web se zatím nedostala. A přitom ji od svých začátků podporuje Mozilla (je na ní postaveno její grafické rozhraní v XUL) a dokonce WebKit.

Minulý týden se tahle myšlenka stala součástí CSS3 a pracuje se na její standardizaci. Definitivní řešení na otázku CSS layoutu to rozhodně není, ale je to maličkost, která potěší, protože - uznejte sami - se občas hodí.

Více viz CSS 3: Progress! od Alexa Russella.

Autora tohoto článku najdete na LinkedIn, Facebooku i Twitteru. Je také autorem jediného českého blogu o vývoji (X)HTML.

Je možné, že CSS tu nebude 50 let a budeme potřebovat nový stylovací jazyk, který bude jednoduchý z uživatelské stránky a zároveň mocnější a rozšiřitelnější z pohledu designu a implementace. Pravděpodobně odvozený od CSS. Ovšem nikoliv CSS jako takové.

Dan Glazman, tohoto času předseda CSS WG v Why (some) standards fail.

Pokud máte trochu času, tak si přečtěte nejen celou Glazmanovu úvahu o standardech, ale i Zeldmanův článek Why Standards Fail, na který Dan reagoval. A pokud máte času opravdu dost, můžete si přečíst i studii Berta Bose (původního předsedy CSS WG) What is a good standard?, která byla inspirací pro oba dva články.

Autora tohoto článku najdete na LinkedIn, Facebooku i Twitteru. Je také autorem jediného českého blogu o vývoji (X)HTML.

Tip: Pokud nevíte, co jsou to CSS sprity, mrkněte se na následující obrázek, který používá běžná stránka hledání Googlu.

Použití CSS spritů by podle připravované specifikace mohlo být vyloženě snadné, a sice:

background-image: url('logos.png#xywh=10,30,60,20')

Což je rozhodně příjemnější zápis než možnosti, které máme dnes.

Druhou novinkou, kterou CSS Image Values zavádí, je možnost fallback obrázků na pozadí, čili např:

background-image: image(picture.svg, picture.png)

Tento zápis zajistí, aby pokud se první obrázek nenahraje, byl použit obrázek druhý atd.

Není třeba se příliš trápit použitou syntaxí (ta se může ještě několikrát změnit, jak už to ve standardizačním procesu chodí) ani podporou v prohlížečích (ta je z pochopitelných důvod zatím zcela nulová). Je dobré jen vědět, že se něco takového chystá a až se někdy budete trápit s otázkou, zda sprity na webu rozhodně ano či rozhodně ne, tak si pamatujte, že CSS WG si myslí že ano a snaží se podobně smýšlejícím usnadnit život.

Autora tohoto článku najdete na LinkedIn, Facebooku i Twitteru. Je také autorem jediného českého blogu o vývoji (X)HTML.