Charlottescoming day technologie

Bohužel moje přítelkyně je až z Walesu, tak se těším, až za mnou přijede teď na vánoce a budeme spolu. A jelikož jsem neměl před pár dny v noci co dělat, rozhodl jsem se naprogramovat webové počítadlo, které by mi ukazovalo, za jak dlouho přiletí.

Nápad s počítadlem původně vzešel od její sestry Millie a inspirován Slapsgiving day ze seriálu How I met your mother jsem se rozhodl vše realizovat. A navíc jsem chtěl použít i trochu moderní technologie, ať se předvedu i po programátorské stránce.

Na http://charlotte.albireo.eu se nyní můžete podívat na výsledek. Použité technologie jsou XHTML, CSS, JavaScript, SVG a VML. Podporované jazyky jsou angličtina, čeština, velština a japonština.

Technologie

Na pozadí webu je malá XHTML stránka, která zobrazí informaci o načítání. Ihned se začnou do paměti načítat JavaScriptové frameworky jQuery a Raphael a samozřejmě moje skripty.

Po načtení skriptů do prohlížeče se spustí má iniciační funkce, která zobrazí Raphaelem vytvořené načítací kolečko. Raphael je framework pro práci s vektorovou grafikou SVG a VML. JavaScript nyní načítá velkou fotografii, která bude použita na pozadí stránky. Skript je napsaný tak, aby podporoval různé velikosti monitorů od netbooků až po velká LCD.

Po načtení pozadí se rozjede vektorová animace a samotné počítadlo. Animace je opět vytvořena pomocí frameworku Raphael.

Změny jazyku aplikace se provádí v reálném čase opět pomocí JavaScriptu. Všechny překlady, včetně japonštiny, jsem si nechal ověřit a jsou tedy snad správné.

Testované prohlížeče jsou Mozilla Firefox, Google Chrome, Opera, Safari a MS Internet Explorery 7 a 8. Internet Explorer 6 nemám momentálně jak testovat.