abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×
včera 19:55 | Zajímavý článek

Byly zveřejněny (pdf) podrobnosti o kritické bezpečnostní chybě CVE-2017-12542 v HPE iLO 4 (Integrated Lights-Out), tj. v proprietárním řešení společnosti Hewlett Packard Enterprise pro vzdálenou správu jejich serverů. Bezpečnostní chyba zneužitelná k obejití autentizace a k vzdálenému spuštění libovolného kódu byla opravena již v květnu loňského roku ve verzi 2.53.

Ladislav Hagara | Komentářů: 1
včera 17:55 | Zajímavý projekt

CSIRT.CZ informuje o CTF (Capture the Flag) platformě ZSIS CTF s úlohami pro procvičování praktických dovedností z oblasti kybernetické bezpečnosti a upozorňuje na soutěž Google Capture the Flag 2018, kde je možné vyhrát zajímavé ceny.

Ladislav Hagara | Komentářů: 0
včera 17:00 | Komunita

Byly zveřejněny prezentace a videozáznamy přednášek z prvního československého setkání síťových operátorů CSNOG konaného 11. a 12. června v Brně a semináře IPv6 2018 uskutečněného 6. června v Praze.

Ladislav Hagara | Komentářů: 0
včera 16:11 | Komunita

Svobodný unixový operační systém FreeBSD slaví 25 let. Přesně před pětadvaceti lety, tj. 19. června 1993, byl vybrán název FreeBSD.

Ladislav Hagara | Komentářů: 0
včera 15:11 | Komunita

Oficiální YouTube kanál Blenderu je již několik dní blokován. Nadace Blender Foundation informuje, že od společnosti Google dostala šestistránkový návrh nové smlouvy (pdf). Zdá se, že podmínkou další spolupráce je zapnutí reklam na kanálu, tj. zpeněžení obsahu.

Ladislav Hagara | Komentářů: 22
včera 01:55 | Nová verze

Byla vydána verze 1.13 multiplatformního open source textového editoru Brackets (Wikipedie, GitHub). Přehled novinek v oficiálním oznámení a v poznámkách k vydání. Brackets je nově dostupný také jako balíček ve formátu Flatpak z oficiálního repozitáře Flathub.

Ladislav Hagara | Komentářů: 3
18.6. 18:44 | Komunita

Oficiální YouTube kanál Blenderu je již několik dní blokován. Důvody jsou zatím nejasné. Pravděpodobně chyba YouTube. Dění lze sledovat na Twitteru Tona Roosendaala.

Ladislav Hagara | Komentářů: 19
18.6. 17:55 | Zajímavý software

Na GitHubu byly pod open source licencí LLVM zveřejněny zdrojové kódy překladače programovacího jazyka C++ Zapcc vycházejícího z Clangu/LLVM. Překlad pomocí Zapccu je díky lepšímu kešování obvykle několikrát rychlejší než překlad pomocí Clangu. V březnu loňského roku byl vydán Zapcc ve verzi 1.0.

Ladislav Hagara | Komentářů: 0
18.6. 17:22 | Pozvánky

Červnový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 21. 6. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát na téma: F-Droid, aneb svobodný software do vašeho mobilu. Kromě toho budou k vidění i vývojové desky HiFive1 se svobodným/otevřeným čipem RISC-V.

xkucf03 | Komentářů: 1
15.6. 22:44 | Zajímavý článek

Na blogu projektu NeoPG (GitHub), kryptografického softwaru vycházejícího z GnuPG, byly zveřejněny 4 příspěvky detailně popisující aktuální bezpečnostní problémy v GnuPG a souvisejících softwarových produktech. V prvním příspěvku je ukázáno, že je možné vytvořit zprávu, o které budou Earlybird, Evolution, Mutt nebo Outlook tvrdit, že jí dešifrovali a přitom ale zpráva vůbec zašifrována nebyla. V druhém příspěvku je popsána

… více »
Ladislav Hagara | Komentářů: 8
Jak čtete delší texty z webových stránek?
 (78%)
 (21%)
 (4%)
 (7%)
 (3%)
 (11%)
Celkem 215 hlasů
 Komentářů: 36, poslední 18.6. 21:16
    Rozcestník

    Pencil – prototypování UI aplikací

    5. 11. 2013 | Václav Švirga | Recenze | 6280×

    Při vývoji (hlavně) webových aplikací jsem narazil na potřebu do specifikace pro zákazníka načrtnout, jak má aplikace asi vypadat. Malovat to na počítači například v GIMPu nebo Inkscape je otrava, nakreslit to na papír a naskenovat nevypadá moc dobře (kreslím hrozně) a osvědčený software pro Windows doporučený kolegy jsem zavrhl, protože používám na desktopu Linux a vždy se prvně snažím nalézt alternativu pro něj. Výsledkem mého hledání je aplikace Pencil a v tomto článku bych ji rád představil.

    Obsah

    Instalace

    link

    Pencil je open source prototypovací nástroj, napsaný docela netradičně jako rozšíření Firefoxu. To je také asi nejjednodušší způsob instalace. Stránky Pencilu rovnež nabízejí RPM balíček pro Fedoru (je i v repozitáři), ale například v Debianu si Pencil přes balíčkovač nenainstalujete. Pro úplnost dodám, že pro Windows existuje .exe.

    Pokud si Pencil nainstalujete jako rozšíření do Firefoxu, může se Vám stát, že něco nebude fungovat. Potom zkuste starší verzi Firefoxu (jen pro Pencil). Sami autoři na stránkách píšou, že Pencil funguje dobře s Firefoxem 4 až 16. Starší verzi Firefoxu je možné najít v mozillím archívu a pro instalaci ji stačí někam rozbalit. Pochopitelně takto starý Firefox by měl být využit pouze na práci s Pencilem a v žádném případě by se přes něj nemělo přistupovat na Internet. Nicméně mně se současným Firefoxem 25 Pencil, kromě jistých problémů s exportem (viz níže), funguje.

    Začínáme

    link

    Pokud máte Pencil nainstalovaný jako extension ve Firefoxu, spustíte ho přes Nástroje -> Pencil Sketching, jinak prostě Pencil spusťte.

    Pencil

    Rozhraní Pencilu je intuitivní. Vpravo máte stránku Vašeho dokumentu a vlevo seznam komponent, které můžete do stránky přetáhnout pomocí táhni a pusť.

    Komponenty

    link

    Bez rozumné zásoby komponent by byl prototypovací nástroj k ničemu. Naštěstí jsem s arzenálem, který nám dává Pencil k dispozici, vcelku spokojený.

    Dále je důležité, aby šly komponenty rozumně rychle najít. To urychluje jednak roztřídění do tématických kolekcí a také vyhledávání. Výčet kolekcí je tento:

    • Common Shapes – různé zákládní tvary a čáry
    • Basic Web Elements – box, text, odkaz, nadpisy, drobečková nagivace, tabulka
    • Desktop – GTK Widgets – pár formulářových prvků a okno, mají vlastní GUI styl
    • Desktop – Native UI Widgets – obsáhlejší kolekce formulářových prvků, navíc přebírá systémový vzhled
    • Desktop – Sketchy UI – směska formulářových a webových prvků, která se snaží vypadat jako namalovaný náčrtek
    • Desktop – Windows XP Widgets – opět kolekce formulářových prvků se skinem Windows XP

    Osobně nejčastěji používám Common Shapes, Basic Web Elements a Desktop – Native UI Widgets.

    Vkládání komponent

    link

    Komponenty přetáhneme do dokumentu pomocí táhni a pusť. Je sympatické, že pokud je zapnuto přichytávání (Tools -> Options -> Snap objects to objects), velmi jednoduše můžeme objekty podle sebe zarovnávat. Pencil umí i přichytávání na mřížku (včetně nastavení jemnosti mřížky), sám to ale nevyužívám.

    Dále umí Pencil vcelku inteligentně kopírovat. Takže pokud už mám na stránce jednu komponentu či skupinu komponent, prostě ji označím, dám CTRL + C, CTRL + V a takto ji namnožím.

    Co se týče skupin komponent, Pencil umí označit více komponent a nastavit jim přes nástroje v nabídce Shape (Formovat) stejnou šířku, výšku, či je podle sebe různě automaticky zarovnat. Nebo z nich vytvořit přímo skupinu (group), která nepůjde jednotlivě editovat, dokud nebude opět rozdělena (ungroup).

    Taková skupina jde dokonce přes kontextovou nabídku přes Add to My Collection přidat do vlastní kolekce.

    Obsah komponent

    link

    Vložení komponent do dokumentu je jedna věc, druhou ovšem je nadefinování jejich obsahu (text odstavce, popisek tlačítka, řádky a sloupce tabulky...). I zde mi přijde Pencil vesměs intuitivní. Obsah každé komponenty se dá změnit poklepáním na ni. Ovšem způsob zadávání se u různých komponent trochu liší. Nejlépe to půjde demonstrovat na pár příkladech.

    Obdélník, HTML text, nadpis...

    link

    Některé komponenty umožňují vkládat libovolně formátovaný text. Patří mezi ně pochopitelně HTML text, ale i třeba nadpis nebo obdelník. Dialog vypadá nějak takto:

    Úprava obsahu obdelníku

    Dobré je také zmínit, že nový řádek se dělá pomocí Shift + Enter. Samotný Enter ukončí vkládání vstupu.

    Popisek (label), tlačítko, combo box...

    link

    Pak jsou zde komponenty, které umí akorát jeden styl textu pro celou komponentu. I ten ale můžeme změnit z nástrojového panelu.

    Úprava obsahu combo boxu

    Možná někoho zarazí, jak to, že combo boxu lze nastavit pouze jednu textovou informaci. Je to proto, že Pencil je jen kreslítko a výsledný export, jak zmíním později, je na úrovni obrázků. Pencil neumí vytvářet interaktivní prototypy.

    Tabulka

    link

    Zde je to už zajímavější. Tabulka je myslím dobrým důkazem toho, že autoři Pencilu na intuitivnost ovládání opravdu mysleli. Po přetažení nové tabulky do dokumentu totiž uvidíme toto:

    Nově vložená tabulka

    Zvědavě na ni poklepeme a...

    Úprava obsahu tabulky

    ...zjistíme, že sloupce se prostě oddělují pajpou (|) a pokud někde uděláme [] či [*], Pencil do tabulky přídá zaškrtnutý či odškrtnutý checkbox. Checkbox je akorát takový bonus, jinak by šel samozřejmě přetáhnout nad tabulku jako komponenta a napozicovat.

    Pencil také umí nastavit šířku jednotlivých sloupců pomocí žlutých úchytek. Výška řádků bohužel nastavit nejde, jde aspoň nastavit výška prvního řádku (hlavičky) po zakliknutí Fixed Header Height v kontextové nabídce. Ostatní řádky Pencil nastaví rovnoměrně. Stejně tak v buňce těžko vynutíme odřádkování (jinak ale Pencil text v buňkách tabulky zalamuje automaticky).

    Barvy tabulky se dají nastavit v kontextové nabídce -> Properties. Minimálně může být užitečné vypnout pro pozadí tabulky průhlednost (opacity).

    Na obdobném principu vkládání obsahu fungují i jiné pokročilejší komponenty, například Tab Box.

    Stránky

    link

    Pencil s více stránkami projektu

    Obvykle neprototypujeme jeden formulář, ale celou aplikaci. Proto se hodí, že Pencil umí pracovat s více stránkami reprezentovanými přes záložky. Jediné co mi nevyhovuje je, že pokud je záložek už moc (nevlezou se do okna), posouvání v panelu záložek není příliš spolehlivé. Proto doporučuji pojmenovávat stránky spíše kratšími názvy.

    Export

    link

    Přes Document -> Export document umí Pencil exportovat do různých formátů. Například PDF, SVG, ODT... Bohužel tyto „pokročilejší“ formáty vyžadují najít na internetu a importovat šablonu, podle které se mají vytvořit a ani s ní mi to příliš nefungovalo. Možná je to tím, že používám Pencil jako rozšíření v příliš nové verzi Firefoxu.

    Každopádně je tu ještě export jako Rasterized graphics, který exportuje každou stránku jako PNG obrázek nebo Single web page, což je to samé, akorát jsou obrázky ještě vloženy do HTML dokumentu. Tyto dva exporty mi fungují bez problému.

    Závěr

    link

    Až na pár bugů či nedodělků (například práce s více stránkami, PDF/SVG export, či to, že se občas nějaká komponenta špatně překreslí – pomůže otevřít ji k editaci poklepáním) a někdy komplikovanou instalací (kompatibilita s aktuálním Firefoxem), mi přijde Pencil jako výborný nástroj, který v praxi využívám. Určitě není špatný nápad ho aspoň vyzkoušet.

           

    Hodnocení: 100 %

            špatnédobré        

    Nástroje: Tisk bez diskuse

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    Komentáře

    Vložit další komentář

    5.11.2013 05:28 asdfasfasfasf
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    a nebo webova aplikace https://moqups.com/

    5.11.2013 14:22 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Nevypadá nejhůř.
    Baník pyčo!
    5.11.2013 18:23 aubi
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    ...do te chvile, nez to zkusis ulozit. Pak uz musis mit konto a smerujes k placene verzi. Pencil Ti bezi lokalne.
    5.11.2013 06:32 petr_p | skóre: 59 | blog: pb
    Rozbalit Rozbalit vše Návrhář uživatelského rozhraní
    Nedal by se použít jakýkoliv návrhář uživatelského rozhraní, který má kdejaký toolkit? Například Glade, QtDesigner?
    Josef Kufner avatar 5.11.2013 12:09 Josef Kufner | skóre: 68
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Pencil a podobné nástroje umí udělat náčrtek klikací. Tedy vyexportují to jako HTML s odkazy mezi obrazovkami, takže fungují například odkazy v menu a tlačítko submit ve formuláři. To usnadňuje otestování logiky ovládání uživatelem/zákazníkem.
    Hello world ! Segmentation fault (core dumped)
    5.11.2013 14:06 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Bohužel Pencil exportuje jako obrázky. Ano, lepší nástroje to umí udělat interaktivní, včetně nějaké logiky (odkrývání, zakrývání formulářů), ale u Pencilu tenhle benefit není.

    Na druhou stranu, oproti Glade / qtDevelopu a jiných IDE se mi s Pencilem pracuje lépe, protože je zaměřen čistě na vizuální stránku a neruší nastavováním vlastností, které by u skutečné aplikace bylo nutné nastavit.
    Baník pyčo!
    D.A.Tiger avatar 6.11.2013 15:07 D.A.Tiger | skóre: 8 | Brno
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Export je mozny jen do HTML? Nejde treba export do XML? Popr definovat format?

    Bohate by stacilo, aby z exportovaneho souboru bylo mozne (jednoduse) vycist jake widgety (+ pozicni parametry - pozice, velikost, popr layout) se maji vytvorit a jakou maji hierarchii.... Neni potom zas velky problem sestavit Tovarnu na objekty, ktera to prezvejka a vygeneruje pozadovany GUI formular. Pak bych to mohl vyuzit i s FoxToolkitem...

    Jinak jsem experimentoval v tomto smeru s vyuzitim Gambase, Inkscape, nebo nejakeho UML editoru (treba Dia z KDE).
    Radost z toho, že někdo objeví něco nového, je omyl starý 6000 let... (Jean Paul) | anthill inside
    8.11.2013 23:03 w4rr10r
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Dia z KDE fakt není.
    D.A.Tiger avatar 10.11.2013 07:37 D.A.Tiger | skóre: 8 | Brno
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Mas pravdu, nedavno jsem to zjistil take. Ken ja ho mam jen s KDE z nejakeho duvodu nejak spojene... Nicmene to je fakt detail.
    Radost z toho, že někdo objeví něco nového, je omyl starý 6000 let... (Jean Paul) | anthill inside
    Rezza avatar 6.11.2013 22:15 Rezza | skóre: 25 | blog: rezza | Brno
    Rozbalit Rozbalit vše Re: Návrhář uživatelského rozhraní
    Nebo rovnou psat v QML :).
    5.11.2013 10:17 sarimak
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Pencil mi v Ubuntu nabidl stazeni DEB balicku (detekuje OS podle user agenta, na Windows nabidne EXE instalator), standalone Pencil pod Ubuntu funguje korektne.

    V minulosti jsem mel problemy s pomalosti standalone Pencil 2 pod Windows (projevovala se jen pri praci s 10+ taby) a s nekompatibilitou Firefox add-on 1.x s novymi verzemi FF. Vypada to ale, ze aktualni verze ma tyhle problemy vyresene.

    Urcite jde pouzit GUI designer (Glade a spol.), ale vyhoda Pencilu spociva v moznosti anotace mockupu (pridam polopruhledny obdelnik bez ramecku, sipku s textem, tipnu screenshot z existujiciho GUI a dopatlam do nej par GUI widgetu pro naznaceni vzhledu nove vlastnosti apod.).

    Osvedcilo se mi pouzivat Sketchy GUI - zcela jasne to ukazuje, ze se jedna o mockup, takze ten kdo GUI posuuzuje, nemuze nabyt dojmu ze "uz je to vlastne cele hotove" a nebude se divit, ze jeste chvilku potrva nez bude nova vlastnost k dispozici. Zejmena pri kombinovani relaneho screenshotu (obrazek na pozadi mockupu) pak nove pridane elementy v Sketchy GUI umyslne vycnivaji "jako pest na oko".

    Pokud napr. prototypuju GUI pro Android, muzu si snadno vyrobit na kolene emblemy pro casto pouzivana tlacitka (napr. Search s obrazkem lupy lze vytvorit z jedne kruznice a jedne usecky, oboji sloucene do 1 skupiny - nebo Camera s obrazkem fotaku lze vytvorit z dvou obdelniku a jedne kruznice).

    Slabina tabulkoveho editoru spociva v nehlidani poctu |, takze pokud se upisu a nekde zapomenu svislitko navic, cela tabulka se rozjede. Podobne zlobilo, pokud jsem na konci zapomnel odenterovany radek na kterem nic neni. Sirka sloupcu se sice tazenim za pricky da upravovat, ale je potreba upravovat sloupce zleva doprava, jinak se obsah rozhodi.

    PS: Pencil nejde moc dobre pouzit na diagramy, protoze neresi routovani spojnic - Dia je porad lepsi alternativa.
    5.11.2013 14:20 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    A jo, fakt že tam .deb balíček je, ale musí se tam prokliknout, v Debianu mi to defaultně cpe .rpm, takže dvakrát dokonalá ta detekce nebude ;-). V každém případě, v repu debianu není a jestli je to ubunťácky .deb, tak bych ho stejně musel upravovat, takže extension mi stačí.
    Baník pyčo!
    5.11.2013 16:07 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Příloha:
    Jinak nějaké omezené routování to umí pomocí "free line", dá se přichytávat do rohů a doprostřed stran, dá se nastavit, jestli má být čára rovná, křivka a nebo lomená, ale nedá se pak nějak doupravit, pokud třeba nějaký objekt překrývá (křižuje) - tedy přidat na ní bod a s ním hybnout, takže je to pořád naprd. Nebo apsoň nevím jak. Taky jsem si nevšiml, že by šel změnit vzhled koncové šipky, akorát jde nastavit, jestli má být šipka na začátku, na konci, na obou, nebo nikde. Takže souhlas, Dia vede ;-).
    Baník pyčo!
    Salamek avatar 5.11.2013 12:01 Salamek | skóre: 22 | blog: salamovo
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Sreenshot vysledku nebo vyexportovane HTML na ukazku by nebylo ?
    Skutečně nemám v plánu zničit Microsoft. Bude to jen zcela neúmyslný vedlejší efekt.
    5.11.2013 14:17 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Jako výsledek si můžeš představit poslední obrázek v článku (to máš jednu stránku dokumentu), výsledné HTML obsahuje pod sebou obrázky jednotlivých stránek (takže je celkem k ničemu). Sám HTML nepoužívám, exportuju rovnou do .png a ty házím do specifikace. Je to prostě kreslítko, nic víc. Užitečné by akorát mohlo být to .svg, ale bohužel jsem export nerozchodil (ale ani se moc nesnažil).
    Baník pyčo!
    Salamek avatar 5.11.2013 23:44 Salamek | skóre: 22 | blog: salamovo
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Aha, ja myslel ze to vyhazuje nejakou parodii na HTML...
    Skutečně nemám v plánu zničit Microsoft. Bude to jen zcela neúmyslný vedlejší efekt.
    5.11.2013 15:00 Karlitos
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Posledni verze na Mac OsX Mavericks vubec nenabehne. Nezda se ze by to zatim nekdo prilis resil.
    6.11.2013 18:48 lko
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    App neni podepsana, nejde spustit, je sbundlovana s XULRunnerem 17 (rok stary). Zkus XPI verzi (vyzaduje Firefox)

    http://evoluspencil.googlecode.com/files/Pencil-2.0-5-fx.xpi
    6.11.2013 16:22 fert
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    myslim ze na to "staci" qtcreator
    7.11.2013 05:59 bpbp
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    balsamiq.com

    Limitovaná funkce dotazená do dokonalosti - maly sw který děla přesně to co je potreba a nic navíc - což je vytvořit a evaluovat koncept UI a workflow. Záměrně nemá podporu pro onpage interakce (i.e. Vyplnění formuláře) - to není vhodné testovat na či mít součástí wireframu, to chce už sw prototyp.

    Platform independent Webový klient, desktop verze pro prohlížení a komentáře od zákazníka Collaborative

    Export PDF clickable (platform independent trotl fest), html, xml a několika pokročilejších wireframing nástrojů

    Masivní knihovny UI prvku fór frí - web, iPad, android, desktop
    7.11.2013 16:09 Václav HFechs Švirga | skóre: 26 | blog: HF | Kopřivnice
    Rozbalit Rozbalit vše Re: Pencil – prototypování UI aplikací
    Z tvého popisu to vypadá jako lepší komerční (uzavřený) pencil. Takže to nemusí být zlé a je to i pro Linux, ale už do toho člověk musí investovat.
    Baník pyčo!

    Založit nové vláknoNahoru

    ISSN 1214-1267   www.czech-server.cz
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.