1.adoc

Markup editor: Lo-Fi prototyp

Table of Contents

• Autoři
• Product statement
• Business requirements
• Restrictions
• Feature brainstorming
• Use cases
• Tasklist and groups
  • Zobrazovací módy
  • Navigace
  • Editace
  • Nastavení
  • Přehled možností editoru
• Tasklist graph
• Wireframe
  • Hlavní zobrazovací módy
  • Ovládání editoru
  • Další možnosti zobrazení, navigace
  • Zobrazení v prohlížeči

_about.adoc

Autoři

Šmolík Jaroslav (vedoucí týmu)

• [email protected]

• Organizace týmu, diskuse osnovy zprávy, brainstorming features, tasklist graph, návrh finálních textů, návrh wireframes

Uhnák Peter

• [email protected]

• Diskuse osnovy zprávy, brainstorming features, revize textů, revize tasklist grafu, revize wireframes.

Špak Maroš

• [email protected]

• Diskuse osnovy zprávy, brainstorming features, revize textů, revize tasklist grafu, revize wireframes.

Chmelař Petr

• [email protected]

• Diskuse osnovy zprávy, brainstorming features, revize textů, revize tasklist grafu, revize wireframes.

Product statement

Markup editor je webová embedovatelná komponenta pro editaci dokumentů v jazycích LML (Lightweight Markup Language). Editor je určen pro technicky zdatné uživatele, u kterých se předpokládá

• znalost syntaxe použitého LML a

• zkušenost s IDE, či editory zdrojových kódů.

Cílem je zprostředkování efektivního psaní dokumentů těmto uživatelům.

Business requirements

Cílem editoru je efektivní použití pro danou cílovou skupinu. Prioritou při editování dokumentu je jeho obsah, nikoli vzhled. Přesto že se jedná o editor dokumentů, je snahou přiblížit se kodérským editorům, kde má uživatel přímou kontrolu nad zdrojovým kódem dokumentu, než nabízet omezený WYSIWYG editor. Pohodlnost WYSIWYG editoru je kompenzována real-time náhledem. Výsledná komponenta je využitelná jako editor v rámci blogovacího nebo wiki systému.

Restrictions

Editor bude ve výsledné podobě modulární a poskytovat podporu více jazyků formou modulů. Pro potřeby projektu budeme uvažovat pouze jazyk Markdown.

Vzhledem k rozsahu projektu předpokládáme, že nestihneme implementovat všechny pokročilé funkce editoru, nicméně poskytneme použitelnou implementaci pro editování běžných Markdown dokumentů.

Feature brainstorming

• Skoč na řádek

• Fullscreen mód

• Vyhledávání v dokumentu

• Autocomplete

• Syntax highlight

• Živý náhled dokumentu

• Dvousloupečkový náhled (zdrojový kód vedle náhledu hotového dokumentu)

• Command pallette

• Document outline preview

• Spellcheck

• Čísla řádek (toggle)

• Zalamování textu

• Sbalování sekcí kódu

• Distraction free mód

• Diff (indikace změněných řádek)

• Běžné klávesové zkratky

• Status bar

• Synchronizované scrollování editoru a preview

• Možnost se proklikávat z preview do editoru

• Přesouvání celých sekcí v dokumentu pomocí outline

• Paste obrázku přímo do editoru, který to promění na správnou LML syntaxi a obrázek uloží

• Manipulace s tabulkami

Use cases

1. Zvolitelný zobrazovací mód editoru

   Uživatel může zvolit zobrazení editoru vhodné pro to, čemu se chce právě věnovat.

   • Dvousloupčekový mód editoru (zdrojový kód a náhled) je vhodný pro běžné úpravy, nebo pokud uživatel využívá pokročilé funkce LML a chce zkontrolovat výstup preprocessoru.

   • Náhled pouze zdrojového kódu je vhodný pro nerušené psaní dokumentu, kde se autor soustředí na obsah.

   • Náhled pouze dokumentu je vhodný pro revizi hotového obsahu.

2. Editace dokumentu

   Uživatel upravuje dokument přímou editací zdrojového kódu v LML.

3. Navigace v dokumentu

   Každý LML vytváří implicitně strukturu dokumentu, pomocí nadpisů různých úrovní. U větších dokumentů je vhodné využít tuto strukturu pro navigaci ve zdrojovém kódu.

4. Nastaveni voleb editoru

   Uživatel musí mít možnost nastavení funkcí editoru, které nesouvisí přímo s editací zdrojového kódu dokumentu. Například se jedná o přepínání zobrazovacích módu.

5. Pomoc uživateli s pokročilými funkcemi

   Editor bude poskytovat uživatelům přirozené UI pro úpravu dokumentu. Vzhledem k povaze uživatelů se předpokládá, že preferují ovládání pomocí klávesnice před klikáním na popsaná tlačítka. Bylo by vhodné poskytnout nějakou formu pomoci, tutorialu, či přehledu pokročilých funkcí editoru.

Tasklist and groups

Note

Protože se jedná o embedovatelnou komponentu, je nutné myslet na to, jak bude vypadat editor na cílové stránce. Zde předpokládáme dvě možnosti. Nejedná se o tasky, nicméně tyto možnosti musí být zohledněny při návrhu wireframes. Embedování editoru v rámci webové aplikace Editor bude jako element v DOM, mezi ostatními prvky webové stránky. Je tedy nutné počítat s menším místem pro samotný editor. Fullscreen zobrazení editoru Editor bude bez ohledu na umístění v rámci webové stránky umožňovat zobrazení na celou obrazovku, které poskytne uživateli nerušené prostředí, nezávislé na umístění editoru do layoutu.

Každý nadpis v této sekci tvoří skupinu tasků. Skupiny jsou tvořené logickou sounáležitostí tasků.

Zobrazovací módy

1. Zobrazení zdrojového kódu

2. Zobrazení náhledu dokumentu

3. Zobrazení zdrojového kódu a náhledu dokumentu ve dvou sloupcích vedle sebe

4. Synchronizované scrollování ve dvousloupcovém módu

5. Distraction free mód

6. Zobrazení/skrytí čísel řádek ve zdrojovém kódu

7. Vypnutí/zapnutí zalamování textu

8. Vypnutí/zapnutí kontroly pravopisu ve zdrojovém kódu

9. Sbalování/rozbalování bloků ve zdrojovém kódu

Navigace

1. Vyhledávání textu

2. Skočit na řádek

3. Zobrazení/skrytí struktury dokumentu (outline generovaná z nadpisu)

4. Navigace pomocí struktury dokumentu (kliknutí na nadpis vyhledá řádek ve zdrojovém kódu)

Editace

1. Multicursor editace

2. Copy & paste

3. Běžné klávesové zkratky

4. Autocomplete

5. Autosave

6. Přesunutí sekcí v outline

Nastavení

1. Přepínání zobrazovacího módu (zdroj, náhled, vedle sebe)

2. Vypnutí/zapnutí zobrazení čísel řádků

3. Vypnutí/zapnutí zalamování textu

4. Vypnutí/zapnutí kontroly pravopisu

5. Vypnutí/zapnutí distraction free módu

6. Vypnutí/zapnutí zobrazení outline

7. Nastavení živého náhledu (live, timeout, manual)

Přehled možností editoru

1. Seznámení se základními klávesovými zkratkami a pokročilou interakcí formou tutoriálu nebo přehledu

Tasklist graph

Wireframe

Hlavní zobrazovací módy

Dvousloupečkový pohled

Pouze zdrojový kód

Pouze náhled dokumentu

Ovládání editoru

Ovládání a nastavení editoru probíhá přes tzv command palette

Další možnosti zobrazení, navigace

Zobrazení dalších možností editoru

Zobrazení v prohlížeči

Editor je vnořen do layoutu stránky použit jako dílčí komponenta

Editor je ve fullscreen módu