Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,096 views

Published on

Uživatelské rozhraní webových aplikací

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×