Spouštíme WebShotter

Párkrát jsem už zmínil, že teď dělám na něčem, nebo spíš v něčem, co se jmenuje Agilio. Je to taková firma-nefirma, řekněme spíš tým vývojářů, kde děláme na několika projektech, a první, který spatřuje světlo světa, je WebShotter.

Takhle vypadá první verze WebShotteru

WebShotter vznikl z mé “potřeby” mít jakousi vzpomínku, jak se některé mé weby vyvíjejí a budou vyvíjet. Kupodivu jsem nenašel žádnou službu, která by toto elegantně řešila – ty stávající se buďto zaměřují na bezprostřední testování vzhledu v různých browserech a neukládají historii, nebo se jedná o drahá komerční řešení, jejichž hlavním cílem je dělat “notářsky ověřené” screenshoty webů, patrně pro případné dohady se zákazníky apod. Nic z toho jsem však nechtěl – hledal jsem jednoduchou, levnou službu pro velmi prosté využití.

Rozchodil jsem si proto někde u sebe wkhtmltopdf a plánovačem úloh dělal screenshot každý den, ale nebyla to zábava – jednak jsem musel vynaložit určité úsilí na konfiguraci všeho na začátku (a přijít vůbec na to, jak technicky screenshoty dělat), ale byly tam i další otravnosti, např. jsem musel mít přístup k trvale spuštěnému kompu, wkhtmltopdf nedokázal vyfotit všechno, o obrázky jsem jednou kvůli nedostatečné záloze přišel a tak dále.

Když jsme proto v Agiliu hledali “rychlý” projekt, na kterém bychom si vyzkoušeli různé technologie, postupy i způsoby spolupráce, WebShotter byl poměrně jasnou volbou. Nechme stranou, že ten projekt nakonec vůbec nebyl rychlý, a jak se programátoři normálně v odhadech seknou dvakrát až třikrát, tak mně se to tady povedlo ještě několikanásobně překročit :), nicméně výsledek je venku a WebShotter můžete začít používat.

Než se do toho pustíte, měli byste vědět pár věcí:

  • Zatím máme v hlavičce nálepku “beta” a není tam náhodou nebo ze zvyku. Ono se to asi na první pohled nezdá, ale i u takhle jednoduché až triviální služby je kupa detailů, které mohou pozlobit (focení pluginového obsahu, správné chování “time machine” v browserech apod.), a některá funkčnost ještě není zpřístupněná (např. mazání účtů – zatím se dělá na požádání). Pokud proto narazíte na jakékoliv problémy, dejte nám prosím vědět.
  • Celé UX prohlížení je založené na efektu “time machine” a ten, jelikož je implementovaný v HTML5 a ne třeba ve Flashi, vyžaduje dost moderní browser. Takže když WebShotter navštívíte v aktuálním IE9, zahlásí vám, že je zastaralý :) Vše by mělo fungovat v Chromu, Firefoxu, IE10, a při dobré konstelaci hvězd i v Opeře. Mimochodem, celé to je zatím založené primárně na scrollování kolečkem myši, kde je efekt nejlepší (ačkoliv jde použít i šipky na klávesnici, 3D šipky vedle time machine nebo časovou osu), a tato první verze zatím není optimalizovaná pro touch zařízení. To je v plánech do budoucna.
  • Službu lze používat zdarma neomezeně dlouho a pro neomezeně webů (každý uživatel jich může mít třeba deset), jen v tom případě ukládáme posledních 90 screenshotů každého webu, tj. cca 3 měsíce historie. Pořádný smysl služba samozřejmě dává až ve chvíli, kdy se ukládá celá historie webu, a jelikož tahle sranda na serveru něco stojí, WebShotter je v tomto módu levnou, ale placenou službou. Potřeba pokrýt náklady a snaha udělat WebShotter co nejlevnější se nám protnuly na ceně 1 dolar měsíčně, což bude, doufám, pro většinu uživatelů přijatelná, pro někoho až zanedbatelná částka.

Tak, to je asi tak všechno důležité. Aktuální release není zdaleka perfektní nebo kompletní, ale je to podle našeho názoru minimum viable product a v takové podobě jde ven. Doufám, že si ho aspoň někteří z vás užijete :)

P.S. Technologický blog post bude následovat.
P.P.S. Feedback můžete psát do komentářů nebo přes formulář na WebShotteru.

20 komentářů u “Spouštíme WebShotter
  1. Vypadá to moc hezky, vzdušně a moderně. Web applu je už z roku 2001, přestože je služba nová.. Ty staré screeny jsou z web.archive?

  2. Jen zírám. To je paráda. Skvělý nápad, precizní zpracování. Všechna čest. Už jsem si také přidal svůj web.

    PS: Po přihlášení pomocí FB jsem přesměrován opět na stránku s přihlášením. Tzn. přihlásím se pomocí FB a na webu pořád vidím možnosti pro přihlášení pomocí FB, googlu a formuláře. Až po refreshi se mi otevřel můj účet. Testováno v FF 16.0.2

    Je to jen drobnůstka, ale všiml jsem si toho, tak ti to píšu.

  3. Díky za milá slova a pozitivní feedback, Jakube.

    Přihlášení přes FB jsme teď s kolegou zkoušeli a aspoň odsud to funguje správně – přesměruje nás to na /my-webshots v případě, že už nějaké weby uživatel sleduje, nebo na /add-web, pokud ještě ne. Tak snad se jednalo jen o něco dočasného.

    Happy webshotting :)

  4. Služba vypadá zajímavě a určitě jí zkusím. Registrace mi bohužel skončila 500stovkou, ale login existuje, jelikož se lze přihlásit, ovšem doregistrační mail není nikde. Mimochodem v jaký čas probíhá screenování nového obrázku?

  5. Luboši, díky za report. Ač většina registrací projde, tento problém nebyl ojedinělý a budeme ho neprodleně řešit.

    Dělání screenshotů probíhá cca o půlnoci, výjimkou je první obrázek, který se udělá v první celou hodinu po přidání webu. Viz FAQ.

  6. Zvažovali jste kromě PDF ukládat i zdrojáky stránky? HTML s obrázky a dalšími závislostmi? Někdy by to bylo zajímavější nebo užitečnější než PDF.

  7. Moc pěkné. Po dlouhé době vidím nový projekt, který mi hned, na první připadá zajímavý, užitečný a hezky zpracovaný. Gratuluju.

    Jen malá poznámka k UI/UX: Chvíli jsem tápal, co s tím na té homepagi mám dělat. Klikal jsem na “Sroll me”, na tu velkou žlutou šipku, click&drag na ty obrázky – a nic. Jen náhodou se mi to rozpohybovalo pod kolečkem myši. A to jako mackař důvěrně znám koncept TimeMachine! Zkuste nad tím ještě popřemýšlet. V ětch dalších demech už je to lepší (díky té vertikání časové ose), i když ty šikmo umístěné šipky jsou taky trochu matoucí. Ale na homepagi je to s UX ještěo něco horší.

    (Jakub: HTML už archivuje přinejmenším Google a WebArchive.org. A obávám se, že kopírovat k sobě a skladovat embedovaná data, jako třeba ty obrázky, bude asi právně neudržitelné. Hovoří z tebe programátor – jednoduchý, hezky vyrenderovaný screenshot, to je prima služba pro laiky, co tu chyběla.)

  8. Jakub: Odpověděl bych zhruba stejně jako Pixy, náš cíl je, minimálně pro začátek, skutečně daleko “jednodušší”. Do budoucna nic není vyloučeno, ale zatím toho máme v backlogu poměrně dost (např. WordPress plugin) a zkusíme chvilku službu provozovat tak, jak byla původně zamýšlena. Každopádně ale díky za feedback, aspoň vidíme, o co by měl kdo zájem.

    Petr: To, že uživatel neví, jak time machine ovládat, je skutečně náš největší UX problém – víme o tom a už jsme se s tím i snažili něco dělat, ale zatím bohužel neúspěšně. Pokud bys měl nějaký nápad, jak to řešit, určitě ho uvítáme – zatím uvažujeme, že by time machine mohla sama pomalu scrollovat (což je ale technologicky problém), ta současná žlutá šipka by mohla být nahrazena něčím polopatičtějším, např. nákresem prstu na kolečku myši, nebo by tam šla dát třeba nějaká bublina s popisem, podobně, jako to u nových věcí dělá Facebook. Něco z toho určitě zkusíme zrealizovat, díky za další potvrzení toho, že scrollování je problematická oblast našeho GUI, a celkově díky za povzbuzující slova, jsem rád, že ta služba připadá jako dobrý nápad ještě někomu jinému než mně :)

  9. imho tomu chybí především vizuální feedback. Zkusil bych především nějaký lehký zoom těch stránek na mouseoveru a příp. přidat i scrollování pomocí click&drag na ty obrazovky. Když uživatel zjistí, že se mu pod myší něco děje, bude tomu věnovat pozornost a zkusí to daleko spíš, než že vyzkouší všechyn možná gesta na všech možných prvcích v náhodném pořadí…

    Ale viděl jsem to jen letmo, ber to jen za zkusmý výstřel od boku.

  10. To je dobrý nápad, navíc by nám click+drag možná mohlo vyřešit dotyková zařízení. Díky za dobrou myšlenku.

  11. Borku – moc pěkné, gratuluju. Nastavil jsem to okamžitě pro Apiary a napjatě čekám na výsledky! Confirmation email mi spadnul do spamu – zkuste to nějak vyřešit.

  12. Gratulace k zajímavé myšlence.

    Co mi z pohledu UX chybí, tak po přidání prvního webu jsem hodně tápal, jak přidám další. Skryté “Add new” v rozbalovacím seznamu je hodně neintuitivní. Velké “call to action” tlačítko pod tímto seznamem by bylo určitě návodnější.

  13. Jakube, do spam koše nám bohužel emaily padají poměrně často, už to řešíme. Díky za report.

    Michale, celá tahle oblast se v příští verzi dočká redesignu, tlačítka Edit, Add a Get Premium skutečně nejsou momentálně nejšťastněji řešená. Díky za potvrzení problému a ať se WebShotter líbí.

  14. Moc pěkný nástroj. Neuvažujete o nějakém API pro externí spolupráci?

  15. Jsme programátoři, takže slovo API se objevilo asi v druhé větě , když jsme WebShotter vymýšleli :) Co konkrétně bys měl na mysli?

  16. I must say it was hard to find your page in google. You write interesting content
    but you should rank your blog higher in search engines.
    If you don’t know how to do it search on youtube: how to rank a website Marcel’s way

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Mete pouvat Markdown: **Tun**, *kurzva*, `kd` atd.

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>