jan korbel

Apple na svých stránkách pro vývojáře vytvořil novou sekci, která se věnuje tvorbě pro iPhone.
Čtěte dál

Nestává se v našem městečku často, aby se zde pořádal multižánrový festival. Když za ním navíc stojí vaši kamarádi, tak musíte hodit na blog jeden off-topic, to se nedá svítit. Stručně: 29. – 30. 6. 2007, Heřmanův Městec. Podrobnosti na webu festivalu…

V minulém díle jsem shrnul teorii přístupu k uživatelskému rozhraní a ukázal jsem svou představu o titulní stránce naší aplikace. Dnes se naplno ponoříme do wireframů všech ostatních obrazovek, se kterými se uživatelé setkají.
Čtěte dál

Pixelmator – levnější Photoshop pod OS X

Nejsem grafik, potřebuju jen základní funkce pro práci s obrázky. Zatím to řeším v Gimpu, ale jeho uživatelské rozhraní je poněkud mučivé, zvláště na Macu. Program Pixelmator vypadá velmi slibně a cena by měla být $59, což je paráda.

Seth Godin a jeho postřeh o Ebay

When you bid $16 for that bat on the first day, you feel terrific. I mean, you just bough a $99 bat for $16.

Of course, you’re only the high bidder for a day or so. Then it’s not your bat anymore! Someone else has your bat. So you bid $4 more. It’s okay, you tell yourself, because, hey, you only spent $4 to get your bat back.

And this keeps going and going until you’ve spent $200.

Zdroj: Seth Godin

PeepCode – video tutoriály na Ruby on Rails

Server nabízí tutoriály typu „Javascript with Prototype.js” po $9 za kus. Ještě jsem žádný nezkoušel, ale stránka ve mě vzbuzuje důvěru a ukázky zdarma nevypadají špatně. Mrkněte třeba na ukázku Test-First Development for Rails (MOV).

Tipy na knihy od 14 zajímavých lidí

Knížek není nikdy dost, takže proč nezařadit do fronty něco, co považují za přínosné osobnosti z různých sfér podnikání?

Guy Kawasaki zpovídá Steva Wozniaka

Příjemný hodinový rozhovor u příležitosti vydání Stevovi knihy iWoz se točí hodně kolem Applu, jak jinak, ale je tam i hodně Wozniakovi životní filozofie.

Záložní systém Drobo

Hledám něco na automatizování záloh a tohle vypadá docela slibně. Ale dokud tam budou ty odporné, nevkusné, na oči útočící diody, tak nemám zájem.

Tak trochu jiný přístup k cenám

Vyberete si písničky a při placení si zvolíte: Vezmu si je jako dar od muzikanta, zaplatím standardní cenu, zaplatím ihned vlastní cenu, zaplatím později vlastní cenu. Statistiky ukazují, že v průměru jsou lidé ochotni zaplatit víc. Hmmmm… zajímavé.

Entropia Universe – konkurence Second Life

William Gibson: Budoucnost už je tady, je jen nerovnoměrně rozprostřena.

Neuvěřitelné, ale pravda

Americký policista někomu zabavil trávu a pak ji doma s manželkou hodili do domácích sušenek, které pekli. Po požití dostali vskutku nepěknou schízu…

Krása

Zdroj: babygeared

Nejlepší nakonec

Nádherná animace, kde je vše tvořeno znaky fontů.

Předcházející díly:

1. 
   1. díl – Návrh databáze
   
2. 
   1½. díl – Dokončení návrhu databáze
   

Před sebou máme bílý papír a v hlavě ne právě konkrétní představu o tom, co od aplikace chceme. Každý, kdo si zkusil nějaké to rozhraní navrhnout, se mnou bude souhlasit, že i zdánlivě jednoduchý problém nabízí mnoho možností jak k němu přistupovat. Snadno se dostaneme do situace, kdy nás jedna funkce rozhraní inspiruje k jiné, která by „taky byla dobrá” a dřív než se nadějeme máme na krku nezvladatelné monstrum, jehož početné hlavy „užitečných funkcí” nás rozsápou na fidloprcičky¹.

Za každou funkci platíme nejen časem investovaným do naprogramování

Především si musíme udělat jasno v tom, co naše web aplikace musí umožňovat nezbytně nutně hned od začátku. Ušetříme tím čas, který bychom strávili nad něčím, co vlastně není potřeba. Navíc, za každou funkci platíme nejen časem investovaným do naprogramování, ale musíme odvést desátky i v podobě složitějšího uživatelského rozhraní, což se může odrazit ve špatném dojmu, který uživatelé budou mít a/nebo ve vyšších nákladech na jejich podporu. Rozumí se samo sebou, že každá funkce komplikuje také testování, vývoj aplikace, zaškolení programátorů a další záležitosti na straně vývojářů.

Proto je velká výhoda, když navrhujeme web aplikaci, kterou budeme sami používat, nebo se týká něčeho s čím máme osobní zkušenost. Pouze pochopení toho, jaký problém řešíme nám dovolí navrhnout správné funkce, teprve používáním získáme opravdový cit pro to, jak to v aplikaci tiká, kde to skřípe. Zprostředkovaná zkušenost nám může být na překážku.

To jsou základní teoretická východiska a teď zpátky k naší web aplikaci pro tisk a správu faktur.

Primární cíle

V našem případě jde především o:

1. Tisk faktur
2. Přehled vystavených faktur
3. Základní statistiku příjmů a výdajů

Pojďme si udělat inventuru toho, co ke splnění těchto cílů nezbytně potřebujeme.

Pro tisk faktur:

• Zadat, upravit, smazat dodavatele
• Zadat, upravit, smazat odběratele
• Zadat, upravit, smazat faktury a jejich náležitosti (doby vystavení a splatnosti, položky faktury, ceny, sazby DPH)

Pokud jde o přehled vystavených faktur:

• Vystavené, nezaplacené faktury
• Přehled všech vystavených faktur za určité období a pokud se budeme chtít rozšoupnout, tak i pro určitého klienta

U statistiky příjmů a výdajů použijeme pro začátek jen pasivní výpisy důležitých veličin a neumožníme žádné specifikování parametrů výpisu ze strany uživatele.

• Příjmy a výdaje za jednotlivá čtvrtletí aktuálního roku
• Příjmy a výdaje za poslední čtvrtletí rozepsané po 14-ti dnech

Faktury přijaté od našich dodavatelů nebudeme pro začátek nikde vypisovat, projeví se nám jen ve statistikách výdajů. Později uvidíme, jestli se nám budou hodit nějak podrobněji vypsané.

OK, to by pro začátek stačilo, pojďme to hodit na papír.

Wireframy – teorie

Jenom pro jistotu: wireframy nejsou o grafické podobě, jsou to nákresy toho, jaké informace a jakým způsobem chceme zobrazovat a měly by sloužit jako podklady pro grafika, který tuto kostru potáhne svaly a kůží.

Teprve až používáním v reálných podmínkách zjistíme, co opravdu potřebujeme

Pro web aplikace platí, že nemá cenu trávit nad wireframy příliš mnoho času ve snaze vytvořit něco, co bude na 100% vystihovat výsledek (ani na 90% ne). To se nám nikdy nemůže povést. Proč? Protože si nejsme schopni představit, jak to v aplikaci bude fungovat ve skutečném provozu. Teprve až používáním v reálných podmínkách zjistíme, co opravdu potřebujeme. A tím nemyslím, že musíme u aplikace sedět dva měsíce. Čím větší bude problém, který jsme “neviděli na papíru”, tím rychleji ho odhalíme. Moje zkušenost je, že opravdu zásadní chyby vyjdou na světlo během pár dnů. Takže wireframy ano, ale přiměřeně – mluvíme rozhodně v řádu hodin².

Někomu vyhovuje i první úvahy o uživatelském rozhraní web aplikace rovnou budovat v HTML. Já si myslím, že nás může tento přístup odvést od dobrých řešení, protože HTML přeci jen není tak pružné jako tužka a papír, kde se můžeme nechat unést a naskicovat něco, co se nám bude špatně programovat, ale co bude velmi dobře fungovat.

Wireframy – praxe

Rád bych tu publikoval návod, který by ukázal postup, jakým jsem se dostal k tomu, co uvidíte níže, ale těch rozhodnutí je i na takto malé aplikaci hodně a o některých pravděpodobně ani nevím, protože je dělám podvědomě. Proto ukážu své výsledné wireframy, stručně popíšu, proč jsem se na jednotlivých místech rozhodl, jak jsem se rozhodl a pak to můžeme v komentářích probrat.

Úvodní stránka aplikace

Uvažoval jsem takhle: Náš nejčastější důvod návštěvy úvodní stránky bude podívat se na to, které faktury jsou zaplacené, blíží se splatnosti, nebo jsou po splatnosti. Pak budeme chtít vidět statistiku příjmů a výdajů za poslední dobu a nějakou formu celkového přehledu za delší období. Samozřejmě dalším důvodem bude to, že chceme vystavit fakturu nebo přidat do databáze přijatou fakturu, takže se musíme postarat i o to.

A už v tomhle kroku se mohou naše názory lišit. Web aplikace, kterou zde navrhuji, je určena pro malé firmy, kde se faktury vystavují jednou do týdne nebo spíš jednou za čtrnáct dní a ti, co je vystavují, mají přímý zájem vidět, jak si firma vede, protože jejich výplaty na tom přímo závisí.

Jakým způsobem vypsat faktury, které čekají na zaplacení? Faktura má řadu náležitostí — číslo, odběratele, položky faktury, datum vystavení, datum splatnosti — pokud bychom je prostě vypsali do tabulky zahltíme stránku údaji, které vlastně nepotřebujeme. Co nás zajímá na vystavených, nezaplacených fakturách? Komu jsme ji vystavili, na jakou částku a kdy je splatná.

Obrázek č. 1 – Přehled vystavených, nezaplacených faktur

Přišlo mi užitečné barevně zvýraznit doby splatnosti, kdy blížící se jsou zelené, vzdálenější než 5 dní jsou běžnou barvou a faktury po splatnosti jsou červené. Jak je na obrázku naznačeno po najetí myší nad řádek s fakturou se objeví nabídka s tlačítkem pro označení faktury jako zaplacené a malá ikona pro její úpravu.

Musíme také počítat s tím, že přehled vystavených faktur bude mít proměnlivou výšku, nebo dokonce nebude co vypisovat. Osobně bych v případě, kdy nebude žádná faktura čekající na zaplacení, nechal vypsat přehled posledních 10 vystavených faktur. Ale možná v reálném provozu přijdeme na lepší obsah, takže se s tím, teď nebudeme trápit.

Pak chceme vypsat statistiky příjmů, které nám dají představu o tom, jakou výplatu si můžeme dovolit a jak si vedeme v krátkodobém a střednědobém pohledu. Zvolil jsem dva jednoduché přehledy – výpis příjmů a výdajů za tři měsíce zpátky rozepsaný zhruba po 14-ti dnech a celkový roční přehled rozepsaný po účetních čtvrtletích.

Obrázek č. 2 – Příjmy a výdaje za předcházející tři měsíce rozepsané podrobně

Obrázek č. 3 – Přehled za aktuální účetní rok

Přidání nové faktury pokryjeme tím, že přidáme výrazné tlačítko „Přidat fakturu” na exponované místo. Pak ještě potřebujeme globální navigaci. Zatím se mi zdá, že vystačíme s tlačítky:

• Přehled – úvodní stránka
• Faktury – podrobnější výpis přijatých a vydaných faktur
• Subjekty – prostor pro správu dodavatelů a odběratelů
• Nastavení – určitě se nám bude na něco hodit (minimálně pro definici momentálních sazeb DPH)

Když to celé složíme, dostaneme to, co vidíte na obrázku č. 4:

Obrázek č. 4 – Celý wireframe úvodní stránky aplikace

No, myslím, že pro dnešek by to stačilo. Další díl bude brzy následovat, protože už mám vytvořené i wireframy pro další sekce naší web aplikace, jen se mi zdálo, že už by jejich rozbor zabral víc místa než je vhodné pro jeden článek a taky vám chci nechat čas zamyslet se nad tou teorií, která zabrala většinu dnešního článku.

Pokud by měl někdo zájem, tak tady je zdrojový soubor pro OmniGraffle a exportovaný wireframe jako PDF.

O co přesně jde v té globalizaci? Jakou roli v ní hraje internet a informační revoluce vůbec? Měl jsem pocit, že se kolem děje neco velkého, ale přesně jsem to nedokázal uchopit. A pak jsem si přečetl The World Is Flat od Thomase Friedmana a tečky se spojily. Pokud nevíte, o co jde, připravte se na pocit, jako byste dostali zlatou cihlou do hlavy.
Čtěte dál

Pelmel odkazů, které mě zaujaly.
Čtěte dál

Věcné připomínky Jirky Pecha, Jakuba Vrány a fousa mě donutily původní návrh databáze hodně upravit. Mám tu pro vás finální verzi a pár poznámek.
Čtěte dál

A List Apart spustilo velký průzkum o lidech, kteří se motají kolem webu – The Web Design Survey, 2007. Vyplnění vám zabere zhruba 5 minut, tak neváhejte, ať je tam taky trochu té středoevropské perspektivy.

Jak jsem psal v komentáři v článku o revoluci web aplikací, chci se v následujících příspěvcích pustit do ukázek z praxe. Napadlo mě, že by mohlo být zajímavé vzít moji první aplikaci, popsat postup, jakým jsem nad ní uvažoval a poukázat na chyby, které s časovým odstupem vidím. Přes návrh databáze, uživatelské rozhraní až po programátorskou teorii. Jestli najdu odvahu, ukážu i to moje čtyři roky staré PHPkové zvěrstvo ;)
Čtěte dál

Standard HTML 4.01, který většinou používáme pro tvorbu stránek a web aplikací je 8 let starý. Jeho odvozenina XHTML 1.0 je stará 7 let. Během té doby se změnil náš pohled na web a vyvstaly nové potřeby. Na tom se všichni shodnou. Jsou ale různé představy o tom, jak situaci řešit.
Čtěte dál

Nikde na českém internetu jsem nenarazil na ucelený článek o tom, jaký převrat představují webové aplikace a prohlížeč jako platforma pro tyto aplikace. Nevím, jestli je to tím, že si to tu málokdo uvědomuje, nebo tím, že to všichni vědí a tak o tom nikdo nepíše. Takže minimálně pro utřídění mých vlastních myšlenek, zde je můj nástin revoluce web aplikací.
Čtěte dál

Když máme ten sváteční víkend, podělím se tu s vámi o jednoho časožrouta: Desktop Tower Defense. Je to velmi chytře vymyšlená flashová strategická minihra. Prozradím ještě, že levelů je 50 a je to ten typ hry, kterou musíte prokouknout ;)

Ocenili jsme možnost uložit dosažené skóre nejen pod svým jménem, ale také ho přidat do skupiny. Takže dáte název skupiny kamarádům a předháníte se, kde zahraje víc. No zkrátka musíte zkusit. Ale bacha, je to návykovka… abyste pak neříkali, že jsem vás nevaroval.

Už nevím, kde jsem se k tomu dostal, ale nedávno jsem narazil na Seminars About Long-term Thinking. Zatím jsem slyšel čtyři přednášky a byly hodně zajímavé, takže posílám dál.
Čtěte dál

Pamatujete si nástup RSS a první čtečku? Zrovna když už jsem musel denně kontrolovat kolem 40 stránek, objevilo se řešení, které mi umožnilo zabít ještě více času, ale nad 4× větším množství zdrojů :)
Čtěte dál