2009 Uživatelské rozhraní webových aplikací

1,031 views
1,002 views

Published on

Uživatelské rozhraní webových aplikací

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

2009 Uživatelské rozhraní webových aplikací

  1. 1. Copyright © 2007 KOMIX s.r.o. Martin Ptáček , KOMIX s.r.o. Praha Uživatelské rozhraní webových aplikací
  2. 2. Obsah prezentace Obecné principy a pravidla Základní komponenty webového rozhraní Pokročilé komponenty moderního rozhraní Ovládání, Tisk Grafický manuál
  3. 3. <ul><li>Rychlá odezva a efektivní zpracování </li></ul><ul><ul><li>Efektivní využívání databázových spojení </li></ul></ul><ul><ul><li>Asynchronní zpracování business procesů </li></ul></ul><ul><ul><li>Využití chytrých vyrovnávacích pamětí </li></ul></ul><ul><ul><li>Technologie AJAX </li></ul></ul><ul><li>Uživatelské sezení (HTTP Session) </li></ul><ul><li>Podpora webových prohlížečů </li></ul>Obecné principy a pravidla
  4. 4. <ul><li>Connection Pool </li></ul><ul><ul><li>Efektivní správa databázových spojení </li></ul></ul><ul><ul><li>Spojení je použito pouze při zpracovávání požadavku </li></ul></ul><ul><ul><li>Počet uživatelů nerovná se počet databázových spojení </li></ul></ul><ul><li>Omezení </li></ul><ul><ul><li>Jednotný přístup do databáze </li></ul></ul><ul><ul><li>Nemožnost použití pesimistického zamykání </li></ul></ul><ul><ul><li>Nemožnost použití otevřených kursorů mezi zpracováváním jednotlivých požadavků </li></ul></ul>Rychlá odezva a efektivní zpracování Efektivní využívání databázových spojení
  5. 5. <ul><li>JMS (Java Message Service) </li></ul><ul><ul><li>Zpracování front (Queue) probíhá asynchronně </li></ul></ul><ul><ul><li>Spolehlivá komunikace, persistence </li></ul></ul><ul><ul><li>Škálovatelnost zpracovatelů jednotlivých front </li></ul></ul><ul><li>Použití </li></ul><ul><ul><li>Generování dokumentů, reportů a sestav </li></ul></ul><ul><ul><li>Hromadné akce </li></ul></ul><ul><ul><li>Servisní akce </li></ul></ul><ul><li>Předpoklad </li></ul><ul><ul><li>Jednotný systém notifikací koncových uživatelů </li></ul></ul><ul><ul><ul><li>Email, Rozhraní webové aplikace </li></ul></ul></ul>Rychlá odezva a efektivní zpracování Asynchronní zpracování business procesů
  6. 6. <ul><li>Vyrovnávací paměť </li></ul><ul><ul><li>Uchovávání statických či dlouhodobě stálých dat </li></ul></ul><ul><ul><li>Možnost nastavení </li></ul></ul><ul><ul><ul><li>Časové platnosti </li></ul></ul></ul><ul><ul><ul><li>Algoritmu výběru </li></ul></ul></ul><ul><ul><ul><li>Maximální velikosti vyrovnávací paměti </li></ul></ul></ul><ul><ul><ul><li>Možnost diskové persistence </li></ul></ul></ul><ul><li>Použití </li></ul><ul><ul><li>Číselníky </li></ul></ul><ul><ul><li>Neměnné entity např. subjekty </li></ul></ul><ul><ul><li>atd. </li></ul></ul>Rychlá odezva a efektivní zpracování Využití chytrých vyrovnávacích pamětí
  7. 7. <ul><li>AJAX </li></ul><ul><ul><li>Asynchronous JavaScript and XML </li></ul></ul><ul><ul><li>Změna obsahu stránky bez nutnosti znovunačítání </li></ul></ul><ul><ul><li>Interaktivní uživatelské rozhraní </li></ul></ul><ul><ul><li>Efektivní využití výkonu serveru obsluhujícího požadavky </li></ul></ul><ul><ul><li>Snazší vývoj </li></ul></ul><ul><ul><li>Znovupoužitelnost komponent </li></ul></ul><ul><li>Použití </li></ul><ul><ul><li>Moderní komponenty </li></ul></ul><ul><ul><li>Možnost vytvářet plně interaktivní komponenty tak, jak je známe z desktopových aplikací </li></ul></ul>Rychlá odezva a efektivní zpracování Technologie AJAX
  8. 8. <ul><li>HTTP Session </li></ul><ul><ul><li>Uživatelské sezení vytvářeno na straně serveru </li></ul></ul><ul><ul><li>Možnost uchovávání dat mezi jednotlivými požadavky </li></ul></ul><ul><ul><li>Časová platnost sezení </li></ul></ul><ul><li>Použití </li></ul><ul><ul><li>Přednastavené hodnoty vyhledávání filtrů </li></ul></ul><ul><ul><li>Přednastavené navigační prvky </li></ul></ul><ul><li>Omezení </li></ul><ul><ul><li>Více záložek v jednom prohlížeči = stále jedno sezení </li></ul></ul><ul><ul><li>Omezená velikost </li></ul></ul>Uživatelské sezení (HTTP Session)
  9. 9. <ul><li>Nové prohlížeče </li></ul><ul><ul><li>Firefox 3, Firefox 3.5, Google Chrome, Opera 9, Safari 3, Safari 4, IE8 </li></ul></ul><ul><li>Starší prohlížeče </li></ul><ul><ul><li>IE6, IE7 </li></ul></ul><ul><li>Použití JavaScript Prototype.js </li></ul><ul><ul><li>Transparentní využívání JavaScript funkcí bez nutností znalosti drobných rozdílů interpretace v různých prohlížečích </li></ul></ul>Podpora webových prohlížečů
  10. 10. <ul><li>Základní komponenty </li></ul><ul><ul><li>Odkazy, tlačítka, tabulka, formulář, záložky, menu </li></ul></ul><ul><li>Pokročilé (Advanced) komponenty </li></ul><ul><ul><li>Kalendář </li></ul></ul><ul><ul><li>Strom </li></ul></ul><ul><ul><li>Okna </li></ul></ul><ul><ul><li>DropDown, ProgressBar, Autocomplete (našeptávač), Growler (upozorňovač), Indicator (indikátor stavu) </li></ul></ul><ul><ul><li>Specifické komponenty na míru </li></ul></ul>Rozhraní prezentační vrstvy
  11. 11. <ul><li>Odkazy </li></ul><ul><ul><li>Podtržený text </li></ul></ul><ul><ul><li>Změna barvy při najetí pro snadnou orientaci </li></ul></ul><ul><li>Tlačítka </li></ul><ul><ul><li>Jednoduchá </li></ul></ul><ul><ul><li>Specifická, designovaná na míru </li></ul></ul><ul><ul><li>Primární a sekundární akce </li></ul></ul>Základní komponenty Odkazy a tlačítka
  12. 12. <ul><li>Tabulka </li></ul><ul><ul><li>Třízení </li></ul></ul><ul><ul><ul><li>Klientské, Serverové </li></ul></ul></ul><ul><ul><li>Filtrování </li></ul></ul><ul><ul><ul><li>Jednoduché </li></ul></ul></ul><ul><ul><ul><li>Rozšířené </li></ul></ul></ul><ul><ul><li>Stránkování </li></ul></ul><ul><ul><li>Pohyblivé sloupce </li></ul></ul><ul><ul><li>Tabulka s pevnou hlavičkou </li></ul></ul><ul><ul><li>Způsoby zobrazování řádků tabulky </li></ul></ul><ul><ul><ul><li>Klasické, víceřádkové, specifické </li></ul></ul></ul>Základní komponenty Tabulka
  13. 13. <ul><li>Formulář </li></ul><ul><ul><li>Komponenty </li></ul></ul><ul><ul><ul><li>Text Input, Password Input </li></ul></ul></ul><ul><ul><ul><li>ComboBox, RadioButton, CheckBox </li></ul></ul></ul><ul><ul><li>Klientské validace </li></ul></ul><ul><ul><li>Serverové validace </li></ul></ul><ul><ul><li>Odesílání formuláře </li></ul></ul><ul><ul><li>Označování povinných polí </li></ul></ul><ul><ul><li>Navigace </li></ul></ul>Základní komponenty Formulář
  14. 14. <ul><li>Záložky </li></ul><ul><ul><li>Malé, střední, velké </li></ul></ul><ul><ul><li>Vertikální, horizontální </li></ul></ul><ul><ul><li>Specifické </li></ul></ul><ul><li>Menu </li></ul><ul><ul><li>Vertikální, horizontální </li></ul></ul><ul><ul><li>DropDown </li></ul></ul><ul><ul><li>Specifické </li></ul></ul><ul><li>Grafické znázornění vybrané položky </li></ul>Základní komponenty Záložky, menu
  15. 15. <ul><li>Kalendář </li></ul><ul><ul><li>Možnost jednoduchého zadání datumu </li></ul></ul><ul><ul><li>Ideální jako doplnění, nikoliv jako jediná možnost </li></ul></ul><ul><ul><li>Různé implementace </li></ul></ul><ul><ul><ul><li>Vyhledáváni měsíců, roků </li></ul></ul></ul><ul><ul><ul><li>Jednoduché určení dnešního datumu </li></ul></ul></ul>Pokročilé (Advanced) komponenty Kalendář
  16. 16. <ul><li>Strom </li></ul><ul><ul><li>Plně interaktivní </li></ul></ul><ul><ul><li>Rychlá navigace </li></ul></ul><ul><ul><li>Efektivní zobrazení hierarchie </li></ul></ul><ul><ul><li>Statický </li></ul></ul><ul><ul><li>Dynamický </li></ul></ul>Pokročilé (Advanced) komponenty Strom
  17. 17. <ul><li>Okna </li></ul><ul><ul><li>Editační formuláře </li></ul></ul><ul><ul><ul><li>Zakládání, editace </li></ul></ul></ul><ul><ul><li>Zobrazování detailních informací </li></ul></ul><ul><ul><li>Modální okna </li></ul></ul><ul><ul><li>Konfirmační okna </li></ul></ul>Pokročilé (Advanced) komponenty Okna
  18. 18. <ul><li>DropDown </li></ul><ul><ul><li>Snadné skrývání a odkrývání obsahu </li></ul></ul><ul><li>Autocomplete </li></ul><ul><ul><li>Snadné vyhledávání informací </li></ul></ul><ul><li>Growler </li></ul><ul><ul><li>Informování uživatele o stavu předchozí akce </li></ul></ul><ul><li>Indicator </li></ul><ul><ul><li>Indikace komunikace se serverem </li></ul></ul>Pokročilé (Advanced) komponenty DropDown, Autocomplete, Growler, Indicator
  19. 19. <ul><li>ProgressBar </li></ul><ul><ul><li>Snadná indikace poměru </li></ul></ul><ul><li>Ukázka komponent ve webové aplikaci ProjectX </li></ul><ul><ul><li>http://www.youtube.com/watch?v=6qiKzTrPbx4 </li></ul></ul>Pokročilé (Advanced) komponenty Specifické komponenty
  20. 20. <ul><li>Ovládání </li></ul><ul><ul><li>Myš, kolečko myši </li></ul></ul><ul><ul><li>Klávesnice </li></ul></ul><ul><ul><ul><li>Pohyb po formuláři </li></ul></ul></ul><ul><ul><ul><li>Klávesové zkratky, Accesskey (ALT+x) </li></ul></ul></ul><ul><li>Tisk </li></ul><ul><ul><li>Nativní podpora tisku přímo z webového prohlížeče </li></ul></ul><ul><ul><li>Tisk generovaných dokumentů </li></ul></ul><ul><ul><ul><li>PDF, XLS, DOC atd. </li></ul></ul></ul>Ovládání, Tisk
  21. 21. <ul><li>GM </li></ul><ul><ul><li>Základní styl </li></ul></ul><ul><ul><ul><li>Font, velikost písma, barvy </li></ul></ul></ul><ul><ul><ul><li>Odkazy </li></ul></ul></ul><ul><ul><ul><li>Hlavička </li></ul></ul></ul><ul><ul><ul><li>Nadpisy, odstavce, seznamy </li></ul></ul></ul><ul><ul><li>Styl jednotlivých komponent </li></ul></ul><ul><ul><ul><li>Tabulka, Formulář, Záložka, Menu atd. </li></ul></ul></ul><ul><ul><li>Styl jednotlivých komponent pro tisk </li></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>Ikony </li></ul></ul><ul><ul><li>Ovládání, klávesové zkratky </li></ul></ul>Grafický manuál
  22. 22. Děkuji za vaši pozornost Martin Ptáček [email_address] +420 225 989 981 KOMIX s.r.o. Holubova 1, 150 00 Praha 5 www.komix.cz

×