Visual Studio 2012

Kevés olyan hasznos dolog van a fejlesztő életében, mint a mockupkészítő eszközök. Ezek olyan szoftverek, amelyek segítségével leskiccelhetjük, hogyan fog kinézni az alkalmazásunk. Bár a mockupok tipikusan fapadosan kinéző drótváz ábrák, mégis számtalan előnyük van:

Legalább egyszer mi is végiggondoljuk, hogy milyen funkciókat szeretnénk, és azok hogyan fognak megjelenni a felhasználói felületen. Akár a teljes alkalmazást lerajzolhatjuk, és a hagyományos képfájlokkal ellentétben a mockupkészítő eszközök által biztosított interakcióknak köszönhetően akár ki is próbálhatjuk.
Az ábra felett eszmét cserélhetünk másokkal, akár a megrendelővel, akár más tervező/fejlesztő kollégákkal. Amikor mindkét fél látja, amiről beszélnek, sokkal fókuszáltabb és hatékonyabb tud lenni a megbeszélés. Ha valakinek ötlete van, azt sokkal gyorsabban át lehet vezetni egy statikus ábrán, mint egy élő kódon.
Az ábra mellé villámgyorsan feljegyezhetjük a legjobb ötleteinket (pl. “A Mentés működjön Ctrl+S-re is.”), ami sokkal gyorsabb, mint dokumentációt írni, arról nem is beszélve, hogy egy rövid feljegyzést sokkal valószínűbb, hogy elolvas az implementációt végző fejlesztő.
A mockup alapján szinte mindenki, a grafikus, a sitebuilder, a fejlesztő azonnal el tud kezdeni dolgozni és még a megrendelő is látja, hogy halad a projekt.
Egyes eszközök kódvázat is tudnak generálni az ábrából, ami talán még használható kiindulópont is lehet a fejlesztés során.

Összességében azt tapasztaltuk, hogy a mockupok egyértelműbbé teszik mindenki életét, és bár látszólag plusz munkát igényelnek, a félreértések megszűntetésével végül spórolhatunk velük.

Szerintem teljesen mindegy, hogy milyen eszközzel készülnek a mockupok, a lényeg, hogy a rajzolás ne igényeljen több időt, mint majd az implementáció. Ennek fényében én sokáig papíron mockupoltam, de ma már vannak egészen hatékony eszközök.

Balsamiq Mockups

A Balsamiq egy Adobe Air-re épülő, kifejezetten statikus mockup készítésére tervezett alkalmazás. A használata pofonegyszerű, talán ennek köszönhetően vált a legelterjedtebb eszközzé ezen a piacon. A Balsamiq nem ingyenes, de 79 dollárt simán megér, mi is ezt használjuk már évek óta.

Ami tetszik benne:

Bármilyen alkalmazást megtervezhetünk benne, legyen az desktop, webes vagy mobil app:

A Balsamiq már annyira elterjedt, hogy kis keresgéléssel kész template-eket találhatunk a neten, például akár Windows Phone vagy Windows 8 fejlesztéshez.
Ahogy a fenti ábrán is látszik, a beépített vezérlők kifejezetten rondák (bár az újabb Balsamiq verzióban már “szép” skint is lehet rájuk húzni), ami azért nagyon praktikus, mert egy megbeszélés során a dizájn nem vonja el a figyelmet a lényegről, ami mockupok esetén a funkció, a layout és a navigáció. Aki találkozott már olyan ügyféllel, aki 2-3 órát képes volt elfilózni azon, hogy egy-egy ikon mennyire felismerhető, az tudja, hogy miért preferálom a ronda mockupot.
Az ábrák képesek minimális interakcióra, ugyanis valamennyi vezérlő kattintható és a kattintás hatására képes elnavigálni minket egy másik oldalra. Egy popup ablakot ennek megfelelően úgy rajzolunk, hogy duplikáljuk a teljes ábrát, majd a másolatra rárajzoljuk a felugró ablakot. Ez ugyan plusz munka, de szinte mindent kipróbálhatóvá tesz.
A vezérlők újrafelhasználható egységekbe csomagolhatók, így például egy menüt, vagy egy master page-et elég egyszer megrajzolnunk és egy helyen karbantartanunk.
A Balsamiq-nak van teljes képernyős vetítő üzemmódja, ami egyeztetéseken nagyon praktikus szokott lenni.
Az ábrákat képes PDF dokumentumba exportálni, ráadásul úgy, hogy kattinthatóak maradnak, tehát egy sima PDF olvasóval kipróbálhatóvá válik a mockup.

Néhány tanács azoknak, akik most kezdenek a Balsamiq megismeréséhez:

Vásárlás előtt próbáld ki a szoftvert, van belőle trial és böngészőben futtatható próba változat is.
Nézd végig a vezérlőket, hiszen nincs bosszantóbb annál, mint amikor az ember megrajzol egy összetettebb UI elemet, azután pedig kiderül, hogy készen is behúzhatta volna az eszköztárról.
Mielőtt nagyobb rajzolásba fogsz, keress a neten kész template-eket, például a MockupsToGo oldalán jó adag található.
A Balsamiq használata egyszerű, hamar rá lehet érezni, mégis azt javaslom, hogy fusd végig a dokumentációt, megéri. Sőt, ha van 2 órád, végigolvasni is megéri. Az újrafelhasználható komponensek (azaz Symbols) használata talán nem teljesen magától értetődő, de arról is van doksi.
A gyorsbillentyűk használata sokat dobhat a tempón.
A fájlnevekhez már az elején találj ki egy elnevezési konvenciót. Ez azért fontos, hogy az oldalak közötti linkelés tisztán fájlnév alapján megy (nincs projekt fájl), és ha átnevezel egy fájlt a diszken, nem fognak működni a rá mutató linkek.

Honlap: http://balsamiq.com

Infragistics Indigo Studio

Az Indigo Studio egy pár hete megjelent új eszköz, ami a Balsamiq monopóliumát igyekszik megdönteni az alábbiakkal:

Szebb, élethűbb mockupok készíthetők vele (bár szerintem ez nem előny).
Képes összetettebb interakciókra és animációkra.
Tud Balsamiq fájlt importálni (ez mekkora ötlet ;-).
A V1 verzió ingyenes és az is marad, majd csak annak kell fizetni, aki a V2 verziót akarja használni. Ez egy érdekes megoldás arra, hogy egy új termék betörjön a piacra (még érdekesebb lenne, ha a letöltés egyszerűbb lenne).

Az első ismerkedéshez készítettek egy 6 részes videó sorozatot, szerintem azzal érdemes kezdeni.

Mivel futó projektjeinkben nem akarunk váltani, ezért még nem ástam bele magam az Indigo Studio használatába, de majd a következő projekt előtt megnézem. Van már vele valakinek gyakorlati tapasztalata?

A VS 2012 egyik rejtett szépsége, hogy beépít a PowerPointba egy Storyboarding nevű fület, amely olyan elemeket tartalmaz, amiket akár mockup rajzolásra is használhatunk. Azért “akár”, mert ahogy a neve is mutatja, itt nem kifejezetten a UI a fontos, hanem a felhasználáshoz kapcsolódó sztori.

A panel alján található Find more Storyboard Shapes online link a Visual Studio Gallery Storyboard Shapes kategóriájába visz, ahonnan további rajzelemeket tölthetünk le. Ez a kategória egyelőre nem tartalmaz sok elemet, de azért vannak már használhatók, természetesen némelyik fizetős. Itt van például a Windows8Templates:

A PowerPoint óriási előnye, hogy alig kell tanulni a használatát, ráadásul minden gépen elérhető. Ha bővülne a közösségi kínálat, gyorsan nagyon használhatóvá válna.

Pár bevezető link:

Ti szoktatok mockupolni, és ha igen, milyen eszközt használtok mockup elkészítésére?

Technorati-címkék: mockup,wireframe,storyboard,Visual Studio,PowerPoint,Balsamiq

Az ASP.NET MVC 4 bétával kapcsolatban kiderült két bug, ami a Razor parserhez köthető és amely nehézkessé teheti a Visual Studio használatát, legyen szó 2010-ről vagy 11-ről.

Az elsőnek az a tünete, hogy a .cshtml/.vbhtml editor sokáig gondolkodik, miközben mi gépelnénk bele. Tipikusan akkor jön elő, miután a projektet létrehoztuk vagy nyomtunk egy Clean projectet. A megoldás egy gyors fordítás, hogy a szerelvények bekerüljenek a bin mappába.

A másik hibával akkor találkozhatunk, ha Visual Studio 11 bétában nem Smart indentinget használunk HTML fájlok formázásához (katt a teljes képért):

A korábbi VS verziókban ez az opció HTML fájloknál nem volt elérhető, ez újdonság a VS 11-ben, ráadásul a Smart az alapérték. Azonban előfordulhat, hogy ha a gépen volt már egy korábbi VS példány, akkor a beállítások átköltöztek az új verzióba is és elszáll az editor. A megoldás: Tools –> Options –> Text Editor –> HTML –> Tab –> Indenting: Smart legyen beállítva.

Az ígéretek szerint mindkét hibát ki fogják javítani az RTM verzióra.

Technorati-címkék: Visual Studio,MVC