Dummy toolkit pro prototypování webů

Prototypování webu je často součástí procesu jeho tvorby. Přístupů, jak vytvářet takový prototyp je několik. Já bych rád představil dummy toolkit napsaný v PHP, který je dobrým pomocníkem, pakliže prototyp webu netvoříte v nějakém, často komerčním, softwaru, ale “vlastníma rukama”.

O co jde

Já se třeba často potýkám s problémem, že když tvořím webovou aplikaci nebo prostě jen kóduju webovou stránku a nemám po ruce žádný obsah, který bude obsahovat a nebo tento obsah bude dokonce dynamický, je třeba otestovat nejen to, jak výsledná stránka bude působit, ale také to, jak se budou kupříkladu některé prvky chovat v situacích, kdy jejich obsah bude tzv. přetekát. A to tedy znamená otestovat celou strukturu na různé variace obsahu jejich prvků. A právě s tímto se snaží pomoci dummy.

Knihovnu jednoduše zavedete do své aplikace:

require_once("dummy/dummy.php");

A poté voláte jednotlivé požadavky:

dummy("text@headline");

Toto volání vám vrátí náhodný nadpis, např. Phasellus Aliquam Enim Molestie.

Texty

Ale jsou tu i další možnosti, jak generovat text:

dummy("text@short-teaser"); // vrátí krátký text
dummy("text@paragraph"); // vrátí odstavec textu
dummy("text@time"); // vrátí čas, třeba 8:12 pm
dummy("text@username"); // vrátí uživatelské jméno, třeba pada68

Tohle je jen zlomek toho, co dummy umí. Ve srozumitelné dokumentaci se můžete dozvědět více.

Obrázky

Dummy nezůstává pouze u generování textů. Nabízí také generovat obrázky, různých tématik a především různých velikostí. Jednou se vám zobrazí Obama, po druhé zase roztomilá kočička:).

// vrátí obrázek, jehož poměr bude 16:9 a šířka 640px
<img src="<? dummy("image@640x,16:9") ?>" />

// vrátí obrázek s tématikou avataru (ne filmu:), ale profilovky), velikosti 150x150px
<img src="<? dummy("image/!avatar@150x150") ?>" />

Díky tomu lze generovat třeba blok obsahující 100 náhodných profilových fotografií velikosti 35×35px. Na více příkladů vás opět odkážu na oficilní web.

I obsah postihne náhoda

Na závěr bych rád ukázal, že dummy umí pracovat i s náhodou. Jinak řečeno, poskytuje podporu pro generování náhodného počtu objektů s určitou mírou štěstí – tedy pravděpodobnosti.

Příklad vše ihned osvětlí:

<? if (dumb_luck("50%")): ?>
  There is a 50/50 chance of this happening.
<? endif ?>

Tahle část kódu zobrazí text There … s 50 % šancí.

<ul>
<? while (dumb_luck("5-10")): ?>
  <? if (dumb_luck("50%")): ?>
    <li><a href="#"><? dummy("text@headline") ?></a></li>
  <? else: ?>
    <li><? dummy("text@headline") ?></li>
  <? endif ?>
<? endwhile ?>
</ul>

Tento kus kódu nám zase vrátí seznam s 5 až 10 položkami, kde je 50% šance, že vrácená položka bude odkazem.

Víc pčíkladů snad není již třeba, věřím, že pokud vás dummy zaujal, dokážete si sami projit jeho dokumentaci.

Závěr

Umím si představit, že je dummy dobrým pomocníkem. Já sám jsem ho v praxi vyzkoušel při prototypování tohoto webu, když jsem hledal způsob, jak vyplnit prázdná místa náhodnými texty, abych mohl lépe odhadnout výsledný dojem.

Dokumentaci projektu naleznete zde

Diskuse

comments powered by Disqus