1. PODPORA IMPLEMENTÁCIE ROZHRANÍ
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

2. 3.1 ÚVOD DO GRAFICKÝCH SYSTÉMOV
Programovacie nástroje pre interaktívne systémy poskytujú prostredky pre účinnú transformáciu abstraktného návrhu a princípov použiteľnosti do vykonávateľnej formy.
Tieto nástroje poskytujú programátorovi rôzne úrovne služieb.
Hlavným prúdom interakcie človek- počítač v súčasnosti sú grafické rozhrania - GUI (Graphical User Interface) a oknové systémy WIMP. Umožňujú, že jedna pracovná stanica (workstation - napríklad PC) podporuje oddelené používateľské a systémové vlákna akcií, ktoré pracujú súbežne (simultaneously).
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

3. Interaktívne nástroje abstrahujú od fyzikálneho oddelenia vstupných a výstupných zariadení a dovoľujú programátorovi popísať chovanie objektov na podobnej úrovni ako ich vníma používateľ.
Manažérske systémy pre používateľské rozhrania (niekedy sa používa výraz generátory rozhraní - interface generators) sú konečnou úrovňou nástrojov podporujúcich programovanie, dovoľujúc návrhárovi a programátorovi riadiť vzťah medzi prezentáciou objektov nástroja s ich funkcionálnou sémantikou v skutočnej aplikácii.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

4. Grafické urýchľovače
sú súčasťou grafických kariet - graphic a geometry engines alebo GPU (Geometry Processing Unit).
To čo sa nazýva hardvérová podpora sú vlastne multiprocesorové komplikované systémy s rozsiahlym softvérom, ktorý ale môže využívať len pokročilý používateľ.
Pred pár rokmi ešte drahé grafické stanice so základným softvérom, dnes grafická karta za pár tisíc korún s rovnakým výkonom.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

5. Grafické rozhranie zariadení (Graphic Device Interface - GDI)
Je vrstva, ktorá je rozhraním medzi API a hardvérom. Pôvodne boli GDI prostredníkom medzi elementárnymi funkciami grafického zariadenia, ktoré dokázalo niekoľko funkcií napríklad nakresliť čiaru a API kde sú funkcie ako lomená čiara s určitou hrúbkou a farbou.
API využíva funkcie GDI. GDI na vstupe je univerzálne a na výstupe spolupracuje s riadiacim programom zariadenia.
Ale s vývojom grafických kariet sa presunulo mnoho funkcií API na programové vybavenie grafickej karty.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

6. Príklad použitia GDI v jazyku C.
// dátová štruktúra pre device context - smerník na pamäť obrazu
HDC hdc;
// získanie kontextu zariadenia
hdc = GetDC(hWnd);
// dátové štruktúry pre nový štetec a pôvodný štetec
HBRUSH hBrush, hOldBrush;
// vytvorenie nového štetca zelenej farby
hBrush = CreateSolidBrush(RGB(0, 255, 0));
// použitie nového štetca, pôvodný si zapamätáme pre neskoršie obnovenie
hOldBrush = (HBRUSH) SelectObject(hdc, hBrush);
// zobrazí obdĺžnik 100 x 200, ľavý horný roh bude mať súradnice x=10, y=5
Rectangle(hdc, 10, 5, 100, 200);
// obnovenie pôvodného štetca
SelectObject(hdc, hOldBrush);
// zrušenie nového štetca
DeleteObject(hBrush);
// uvoľníme device context
ReleaseDC(hWnd, hdc);
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

7. Obrázok vytvorený predchádzajúcim kódom
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

8. GDI+ je nová generácia rozhrania GDI prvýkrát použitá vo Windows XP.
Vylepšenia v oblasti výkonu a kvality. Podporuje odstránenie rastrovania, farebný gradient, alfa kanál, miešanie 2D a 3D grafiky, animácií a videa ako aj tlač.
Podporuje formáty JPEG a PNG a je na rozdiel od GDI úplne objektovo-orientované a naprogramované v jazyku C++.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

9. API - aplikačné programové rozhranie:
Je to rozhranie medzi aplikáciou a grafickým systémom počítača. Grafické programy GKS (Graphical Kernel System) - norma ISO, PHIGS (Programmed Hierarchical graphics System) - ISO, ANSI norma - v súčasnosti sa už nepoužívajú.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

10. 2D API
Cairo – multi-platformová knižnica poskytujúca C rozhranie pre zobrazovanie2D objektov na rôzne výstupné média – okná rôznych oknových systémov, obrazové súbory, PDF, PostScript.
OpenVG – API pre vektorovú grafiku v jazyku C od konzorcia Khronos. Podporuje použitie akcelerátorov. Prvé implementácie pre mobilné zariadenia ale aj PC.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

11. 3D API
OpenGL – priemyselný štandard pre 3D ale aj 2D grafiku. Pochádza z dielne Silicon Graphics Inc. Je implementované v každom rozšírenom operačnom systéme (Windows, X11, Mac OS X). Akcelerácia je podporovaná cez ovládače grafického hardvéru. O ich implementáciu sa starajú výrobcovia.
Direct3D – štandardná 3D knižnica operačného systému Windows. Poskytuje akcelerované zobrazenie 3D objektov a správu grafického hardvéru.
Ich výrobcovia dodávajú implementáciu vo svojich ovládačoch. Aj napriek platformovým obmedzeniam je Direct3D najpoužívanejším API pre vývojárov hier.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

12. Príklady „2D“ grafických prvkov v OpenGl (tieto útvary môžu byť neplanárne, to je vrcholy sú v priestore a nemusia ležať v jednej rovine)
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

13. Oknové API
Xlib – obaluje X11 Window System protokol do C funkcií a typov. Zabezpečuje interakciu medzi X serverom a aplikáciou čím umožňuje programátorovi vytvárať okná a manipulovať s nimi. Je to rozhranie najnižšej úrovne, pre prácu s X-Windows sa používajú iné oknové knižnice, ktoré Xlib obalujú. Je dielom konzorcia univerzít a firiem originálne pre OS UNIX ale neskoršie aj pre DOS.
Win32 – základná knižnica s C rozhraním operačného systému Windows. Jej časť zaoberajúca sa používateľským rozhraním poskytuje možnosti vytvárania okien, ich ovládanie a sprostredkúvanie interakcie medzi systémom a používateľom
Qt – robustná multi-platformová oknová knižníca. Obaľuje natívne oknové systémy rôznych platforiem (Windows, X11, Mac OS X, embedded zariadenia) a poskytuje jednotné C++ a Java programové rozhranie
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

14. Prácu s WIMPS podporujú aj značkovacie jazyky (HTML) a skriptovacie jazyky (JavaScript) ako aj autorské systémy pre tvorbu interaktívnych mulimediálnych aplikácií (Macromedia Director, Authorware a Flash).
Opis GUI ako sú User Interface Markup Language (UIML) alebo XML User Interface Language (XUL). API - aplikačné programové rozhranie:
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

15. 3.2 PARADIGMY PROGRAMOVANIA INTERAKCIE
Interaktívne programy sú riadené používateľom (user driven), to znamená, že aplikácia sa určí keď používateľ urobí nejakú vstupnú akciu (napríklad pohne myšou).
Poznáme dva spôsoby ich programovania
- paradigma slučky čítania a vyhodnotenia (Read evaluation loop)
- paradigma oznamovania (Notification based).
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

16. Paradigma slučky čítania a vyhodnotenia (Read evaluation loop)
Táto paradigma klient - server pracuje nasledovne. Server posiela vstupy používateľa ako štrukturované udalosti klientskej aplikácii.
Čo sa týka servera, jediný dôraz udalosti je klient ktorému sa musí poslať. Klientská aplikácia je naprogramovaná aby čítala akúkoľvek udalosť ktorá jej dôjde a zistenie všetkých aplikáčne špecifických správaní sa ktoré, sú dôsledkom tejto udalosti.
Pseudokód slučky načítania a vyhodnotenia je nasledovný:
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

17. read-event(MojaUdalost) case MojaUdalost.typ
repeat
read-event(MojaUdalost)
case MojaUdalost.typ
typ_1: do spracovanie typ_1
typ_2: do spracovanie typ_2
……………………………..
typ_n: do spracovanie typ_n
end case
end repeat
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

18. MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

19. Paradigma oznamovania (Notification based)
Hlavná riadiaca slučka nie je súčasťou aplikácie. Namiesto toho prijíma udalosti od oknového systému centralizovaný oznamovateľ – notifier (listener, caller, event handler), ktoré filtruje aplikačnému programu, spôsobom ako to program deklaruje.
Aplikačný program informuje oznamovateľa (registruje), o ktoré udalosti má záujem a pre ktoré deklaruje jednu vlastnú procedúru ako spätné volanie (callback) predtým ako dá riadenie oznamovateľovi.
Callback funkcia je taká, ktorá sa posiela inému programu ako argument. Vďaka tomu môže program pracujúci na nižšej úrovni volať funkcie definovane vo vyšších úrovniach.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

20. MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

21. read-event(MojaUdalost) case MojaUdalost.typ
repeat
read-event(MojaUdalost)
case MojaUdalost.typ
typ_1: do spracovanie typ_1
typ_2:
----
if (chybova_podmienka) then
read-event(MojaUdalost2)
case MojaUdalost2.typ
typ_1:
……..
typ_n:
end case
until (end-condition2)
endif
…….
typ_n: do spracovanie typ_n
until (end-condition)
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

22. Príklad použitia funkcií callback v knižnici GLUT
Cieľom GLUT(GL Utility Toolkit) je skrátiť čas pre začatie vývoja aplikácií v OpenGL a zároveň pomôcť pri jeho učení.
Programátor je odbremenený od platformovo závislého kódovania, ktorý zahrňuje komunikáciu s operačným systémom a prípadne správcom okien. Kód pre vytvorenie okien, nastavenie zobrazovacieho kontextu a spracovanie udalostí je pre každý operačný systém iný.
Nahrádza tieto volania sadou niekoľkých jednoduchých funkcií, ktoré vykonajú uvedené úlohy automaticky. Programátor sa tak sústredí priamo na špecifický kód OpenGL, čím sa podstatne zrýchľuje vývoj a testovanie aplikácií.
Odpadá aj preprogramovania pre inú platformu - jednoduchá portabilita.
Príklad registrácie spracovanie udalostí v knižnici GLUT GLUT umožňuje aj spracovanie udalostí z klávesnice a myši. Udalosti sú spracované pomocou callback mechanizmu – zaregistruje sa funkcia ktorá bude zavolaná keď nastane daná udalosť. Uvedený je jednoduchý príklad, ktorý si pri stlačení ľavého tlačidla myši zapamätá pozíciu a nastaví príznak stlačenia tlačidla.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

23. Príklady registrácie spracovanie udalostí v knižnici GLUT.
GLUT umožňuje aj spracovanie udalostí z klávesnice a myši. Udalosti sa spracujú pomocou mechanizmu spracovania udalosti (callback, event handler, listener) – zaregistruje sa funkcia ktorá bude zavolaná keď nastane daná udalosť.
GLUT ďalej umožňuje narábať s časovačmi, vytvárať a organizovať pop-up menu.
Príklady registrácie spracovanie udalostí v knižnici GLUT.
1. Príklad zobrazí trojuholník.
2. Pri stlačení ľavého tlačidla myši zapamätá pozíciu a nastaví príznak stlačenia tlačidla.
3. Spracováva stlačenie kláves W, S, A a D, a následne podľa nich sa posúva v smere osí X a Y.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

24. #include <GL/glut.h> void renderScene(void) {
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);
glVertex3f(-0.5,-0.5,0.0);
glVertex3f(0.5,0.0,0.0);
glVertex3f(0.0,0.5,0.0);
glEnd();
glFlush(); }
void main(int argc, char **argv) {
glutInit(&argc, argv);
// režim zobrazenia – výpočet hĺbky, pravé farby a alfa blending
glutInitDisplayMode(GLUT_DEPTH | GLUT_RGBA); // nastaví umietnenie a veľkosť okna
glutInitWindowPosition(100,100);
glutInitWindowSize(320,320);
// vytvorí okno s titulkom
glutCreateWindow("OpenGL pomocou GLUT");
// registruje callback funkciu pre zobrazenie scény
glutDisplayFunc(renderScene);
// zobrazí okno a spustí spracovanie udalostí
glutMainLoop();
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

25. double mX, mY; int clicked; // funkcia pre spracovanie udalostí myši
void mouseFunc(int button, int state, int x, int y) {
if (button == GLUT_LEFT_BUTTON) {
mX = x;
mY = y;
clicked = 1; }
… vo funkcií main …
glutMouseFunc(mouseFunc);
double oX, oY;
// funkcia pre spracovaní udalostí z klávesnice
void keyFunc(unsigned char key, int x, int y) {
switch (key) { // key udáva ASCII hodnotu stlačeného znaku
case 'W': oY = oY + 1; break;
case 'S': oY = oY - 1; break;
case 'A': oX = oX - 1; break;
case 'D': oX = oX + 1; break;
glutKeyboardFunc(keyFunc);
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

26. void renderScene(void) { …
GLUT zobrazí scénu len keď dostane od správcu okien operačného systému pokyn pre zobrazenie.
Pre trvalé opakovanie zobrazenia napríklad pri animácii alebo v systémoch virtuálnej reality je potrebné vždy po dokončení zobrazovania scény požiadať o opakovanie.
void renderScene(void) { …
glutPostRedisplay(); // pošle požiadavku na opätovné zobrazenie }
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

27. Ošetrovanie udalostí v jazyku Java
Ak chceme reagovať na vzniknutú udalosť, musíme implementovať rozhranie vhodného prijímača udalostí.
1. Môže to byť samostatná trieda, ktorá bude implementovať dané rozhranie.
public class myKeyDemo extends JFrame implements KeyListener {
public void keyPressed( KeyEvent e ) {
//akcia, ktorá sa vykoná pri stlačení klávesy }
public void keyReleased( KeyEvent e ) {
//akcia, ktorá sa vykoná po uvoľnení stlačenej klávesy
public void keyTyped( KeyEvent e ) {
//akcia, ktorá sa vykoná po stlačení klávesy
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

28. 2. Ale môže to byť aj vnorená trieda (inner class)
JButton Button1=new JButton(“Button1”);
Button1.addActionListener(new ActionListener(){
actionPerformed(ActionEvent e){
//reakcia na udalosť, ktorá sa vykoná po stlačení tlačidla
}});
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

29. NÁSTROJE PODPORUJÚCE TVORBU WIMPS
WIMPS - Windows Icons, Menu, Pointing deviceS
Úloha oknových systémov je poskytnúť nezávislosť od špecifík programovania rôznych hardvérových zariadení a manažment viacerých, nezávislých ale súčasne bežiacich aktívnych aplikácií. Vlastnosťou a cieľom programových knižníc pre tvorbu rozhraní je:
Nezávislosť používateľského rozhrania (oddeľuje návrh rozhrania od návrhu aplikácie, umožňuje viac stratégií návrh UI, podporuje viacplatformové aplikácie, vytvára pozíciu architekta UI, vynucuje si používanie noriem).
Metodológia a notácia (vývoj návrhárskych procedúr, nájdenie spôsobu ako hovoriť o dizajne, vytvorenie riadenia projektu).
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

30. Rýchle prototypovanie - rapid prototyping (rýchle overenie nápadov, iterovanie - cyklus testovanie a úprava návrhu, zaangažovanie konečných používateľov, manažérov a zákazníkov).
Softvérová podpora (zvyšuje produktivitu, poskytuje testy obmedzení interakcie a jej konzistencie, uľahčuje tímovú prácu, uľahčuje údržbu softvéru a tým sa zvyšuje celková kvalita GUI).
Programové knižnice pre tvorbu rozhraní s oknovými systémami môžme deliť napríklad deliť na štyri softvérové vrstvy:
Oknové systémy, Nástroje pre GUI, Aplikačné rámce a špecializované jazyky a Aplikácie.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

31. 1. Oknové systémy (Windowing systems).
Príkladom sú Xwindows (X11 Windowing system), Microsoft Win32/GDI+, Apple Quarz. Táto vrstva je vhodná pre prezentáciu a interakciu s aplikáciou, veľmi dobre komunikuje s inými subsystémami, čas vytvorenia rozhrania aplikácie je dlhý a je veľmi náročná na naučenie sa. Možnosti rozširovania a modularita sú zlé. Tu sa používa programovanie s čítacou a vyhodnocovacou slučkou.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

32. Architektúra klient - server
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

33. Systém X-Windows (X11)
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

34. DisplayInitializeGraphics(); while(true) {
Programovanie na tejto úrovni je trochu náročné, napríklad to čo sa dá urobiť na pár riadkoch špecializovaného jazyka Tcl /Tk sa musí popísať 237 riadkami na úrovni Xlib (XWindows).
main() {
InitializeSystem();
SetinitialState();
DisplayInitializeGraphics();
while(true) {
Event event = readNextEvent();
Switch(event.type) {
Case UDALOST1: udalost1(); break;
Case UDALOST2: udalost2(); break;
……………………………………
deafult: doDefault(event); break; }
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

35. 2. Nástroje pre GUI (GUI Toolkits)
Nástroje uľahčujúce programovanie pomocou preddefinovaných objektov (widgets, gadgets) a ich chovania sa.
Tieto objekty sú usporiadané do tried s možnosťami tvorby inštancií objektov a ich hierarchického dedenia vlastností.
Trieda má preddefinované (defaultné) vlastnosti (attributes) ale niektoré sa dajú meniť.
Príkladom sú OSF Motif, Microsoft Visual Studio a .NET (Basic, C++, C#), Eclipse, Borland JBuilder , Sun NetBeans (Java s balíkmi AWT (Abstract Windowing Tool) a SWING). Táto vrstva je vhodná pre prezentáciu, dobre komunikuje s inými subsystémami, čas vytvorenia rozhrania je dlhý a je náročná na naučenie sa. Možnosť rozširovania a modularita je vcelku dobrá.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

36. Hierrarchia tried XView
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

37. Hierrarchia tried Java AWT
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

38. Hierrarchia kontainerov Java SWING
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

39. Príklad kontainera Jdialog v triede Java SWING
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

40. Hierarchia tried udalostí v Java AWR a SWING
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

41. Správca rozloženia komponentov v Java SWING
Border, Flow, Grid, GridBag, Box Layout
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

42. IDE (Integrated Design Environment) - HLAVNÉ ČRTY
Vytváranie programov je spojené s rôznymi činnosťami - editovanie a preklad zdrojového kódu, tvorba používateľského rozhrania, testovanie programu. IDE poskytuje automatizáciu týchto činností. Mejú nasle´dovné vlastnosti:
Manažment projektov a súborov
Programy pozostávajú z viacerých súborov, ktoré sú uložené v hierarchickej adresárovej štruktúre. Na evidovanie týchto súborov IDE poskytuje vytvoranie projektu.
Šablóny aplikácií
Niektoré aplikácie musia mať istú štruktúru (napr. MFC aplikácie, DLL knižnice). IDE poskytuje niekoľko takých šablónov. Pomocou dialógových okien sa dá veľmi rýchlo vytvoriť kostru programu a programátor sa môže hneď sústrediť iba na samotný problém.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

43. Editovanie zdrojového kódu
IDE obsahuje textový editor pre prácu s viac súbormi s=ubežne, ktorý zvýrazňuje kľúčové slová, označí dvojice zátvoriek, zobrazí v ktorej funcii alebo triede je práve kurzor. Pokročilejšie IDE ponúkajú aj automatické doplnenie kódu s alternatívami a so správnou syntaxou.
Preklad, ladenie a test programov
IDE ponúka vykonanie rôznych krokov prekladu pomocou klávesových skratiek alebo položky menu. Umožňuje navigáciu pri hľadaní chybových hlásení. Integrovaný ladiaci prostriedok umožňuje krokovanie programu (debugging).
Podpora tímových projektov
Niektoré IDE podporujú súčasnú prácu viacerých členov tímu. Komunikujú so systémami pre manažment verzií. Vytvárajú vlastne jednoduché rozhranie medzi programátorom a systémom.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

44. Tvorba používateľských rozhraní
Je už súčasťou skoro každého IDE - GUI builder, GUI editor. Ponúka WYSIWYG editor.
Rozhranie sa tvorí vložením jednotlivých komponentov metódou pretiahni a pusti. Editor eviduje mená, pozície a rôzne iné parametre komponentov.
Výsledok - tvary, farba a umiestnenie komponent je okamžite viditeľný a tým slúži ku komunikácii medzi programátorom a používateľom - aj keďhoci softvér je v tejto etape nefunkčný.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

45. Príklad GUI editora IDE Delphi 7
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

46. Príklad IDE - MS Visual Basic
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

47. Príklad IDE - Sun Netbeans
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

48. Príklad IDE - Sun Netbeans
Umiestnenie nového komponentu (Label) s pomocou vodiacich čiar (modré čiarkované)
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

49. Hlavné časti editorov IDE Pracovná plocha
Na pracovnej ploche sa vytvoria a zrušia dialógové okná a komponenty v dialógových oknách. Editor umožňuje posúvanie komponentov a zmenu ich rozmerov.
Paleta nástrojov
Paleta nástrojov ponúka sadu komponentov, ktoré programátor môže umiestniťv okne ako aj nástroje na rozloženie komponentov (layout manager).
Okno vlastností
Každé dialógové okno a každý komponent má svoje charakteristické atribúty. Tlačidlo má rozmery, pozíciu, farbu a obsahuje text. V okne vlastností sa prezerajú a menia vlastnosti zvoleného objektu.
Prehľadávač objektov
Prehľadávač objektov umožňuje navigovať medzi objektami, ktoré sú zoradené v hierarchickej stromovej štruktúre.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

50. Iné vlastnosti IDE (niektoré)
Zjednodušená práca pri tvorbe formuláru s databázovými prvkami
Ak potrebujeme vytvoriť formulár, ktorý má pracovať s dátami z databázy.
Automatická tvorba UML diagramov a dokumentácie
UML diagramy a dokumentácia sa generuje zo zdrojových kódov každej triedy. Dokumentáciu je možné prezerať priamo v prostredí.
Tvorba zálohy
Pri tvorbe rozhraní sa vytvárajú automaticky zálohy súboru, s ktorým pracujeme - možnosť vrátiť sa k predchádzajúcim verzii súboru.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

51. Jednoduchá aplikácia v jazyku Java s balíkom SWING
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

52. Qt
Qt je multi-platformová vývojový systém široko používaný pre vývoj GUI. Qt používa C++ spoločne s niekoľkými neštandardnými rozšíreniami, pridanými cez pre-procesor, ktorý generuje štandardný C++ pred kompiláciou.
Súčasná verzia Qt využíva pre zobrazenie prvkov Qt natívne API na rozdielnych platformách.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

53. 3. Aplikačné rámce a špecializované jazyky (Application Framework/Specialized Language).
Vrstva reprezentovaná nástrojmi pre konceptuáknu tvorbu. Táto vrstva je vhodná pre prezentáciu a interakciu, komunikácia s inými subsystémami závisí od nástroja (Flash komplikované, MFC dobré), čas vytvorenia rozhrania je krátky a je nenáročná na naučenie sa.
Rozširovanie a modularita v prípade jazykov je obtiažne ale pre rámce je dobré. Aplikačné rámce sú založené na objektovom programovaní.
Prvým bol Apple MacApp. Hlavným znakom je že všetky používateľské rozhrania programov majú podobnú štruktúru.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

54. Iný prístup sú skriptovacie jazyky ako Tcl/Tk.
Zobraním tejto štruktúry a preložením do tried, objektov a metód veľmi urýchli vývoj aplikácie, lebo používateľ nemusí tvoriť všetko od začiatku.
Príkladom sú NextStep a jeho následník Cocoa a Microsoft MFC (MS Foundations Classes).
Na druhej strane programátor musí pochopiť veľa abstraktných konceptov.
Iný prístup sú skriptovacie jazyky ako Tcl/Tk.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

55. Príklad aplikácie so skriptovacím jazykom Tcl a podporným nástrojom Tk.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

56. PRINCÍPY TVORBY WIMP V SIEŤOVÝCH APLIKÁCIÁCH
WIMP pre statické internetové dokumenty sa dajú tvoriť aj v jazyku HTML a CSS.
Hyperlinky sa dajú zoskupovať do menu. Obrázky v linkách predstavujú ikony. A konečne „okná“ sa dajú dosiahnuť pomocou rámov (frames) alebo CSS.
PHP
Pri aplikáciách pomocou HTML sa používa jazyk PHP. Mení bezstavové HTML na plnohodnotný programovací jazyk. Tento jazyk beží na serveri, a používateľovi predkladá len čisté HTML, teda jeho vyjadrovacie prostriedky sú rovnaké ako HTML, ale užívateľské vstupy sa lepšie premietnu do výstupov (vďaka stavom).
Vyvinul sa malé systémy, ale úspešne sa osvedčil aj vo veľkých.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

57. JavaScript a AJAX
Iný jazyk používaný spolu s HTML je JavaScript, ale tento na rozdiel od PHP sa vykonáva na strane klienta.
Dokáže tiež spolupracovať s HTML a DOM modelom stránky. Príklady jednoduchého využitia sú otváranie nových okien a zmena vzhľadu objektov po prechode ukazovateľom myši (ale to sa dnes dá aj pomocou statického CSS).
JavaScript sa považuje za málo bezpečný jazyk a nevhodný pre veľké systémy.
V takomto prípade sa používa kombinácia JavaScriptu a XML - Ajax, ktorý odstraňuje isté nedostatky čistého JavaScriptu.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

58. Príklad aplikácie so skriptovacím jazykom JavaScript a HTML
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

59. Microsoft Windows Presentation Foundation (WPF) definuje XAML
ASP.NET
Je to balík technológií ale samotnými jazykmi sú VisualBasic a JScript.
Ponúka široké možnosti na vytváranie ovládacích prvkov, a navyše umožňuje vytvárať „design-time user interface“, teda dočasný (pracovný, šablónovitý) vzhľad stránky, ktorý môžu iní ľudia ďalej dotvárať v integrovaných vývojových prostrediach ako napríklad MS Visual Studio.
Microsoft Windows Presentation Foundation (WPF) definuje XAML
deklaratívny jazyk pre rozhrania, ktorý beží na vrchu NET.Framework 2.0 a pripomína XUL.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

60. ColdFusion
je balík technológií od spoločnosti Adobe Systems. Používa vlastný jazyk CFML, a jeho prednosťou je vytváranie formulárov (rich forms), export do filmov jazyka Flash a konverzia na formát PDF.
Výhodou je generovanie kódu na strane používateľa. Samotný ColdFusion je napísaný v platforme J2EE a tak umožňuje kvalitnú integráciu s jazykom Java.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

61. Java Server Pages
Integráciu s jazykom Java umožnuje technológia Java Server Pages, pomocu ktorej možno do statického kontextu zasadiť kód jazyka Java s nadefinovanými aktivitami, a generovať HTML a XML kód podľa želaní používateľa.
Ruby on Rails
Výhodou Ruby on Rails oproti predchádzajúcim dvom balíkom je otvorený zdrojový kód. Na mnohé aspekty webových aplikácií ponúka hotové konvenčné riešenia, ktoré stačí len minimálne upravovať. Pod „aspektami“ rozumiem oblasti ako napojenie na databázu, ale tiež (z hľadiska HCI dôležité) bohatstvo ovládacích prvkov. Základom tejto technológie je jazyk objektovo-orientovaný interpretovaný jazyk Ruby.
Všetky spomínané technologické platformy viac či menej striktne dodržiavajú návrhový vzor Model-View-Controller.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

62. XUL - XML User Interface Language.
Je to jazyk na špecifikáciu používateľského rozhrania na báze XML.
Tvorí premostenie medzi bežnými aplikáciami a webovými aplikáciami, pretože v prehliadači Mozilla Firefox sa používa aj na zobrazenie WWW stránok, ako aj na samotné ovládacie panely a iné prvky daného prehliadača.
Jazyk XUL sa mimoriadne hodí na užívateľské rozhranie, pretože priamo poskytuje veľké množstvo komponentov, napríklad výber farby, výber dátumu, posuvníky, merače vývoja (progress meters) rozbaľovacie zoznamy s možnosťou výberu viacerých položiek a tak podobne.
Je platformovo nezávislý a striktne oddeľuje zobrazovaciu časť od aplikačnej logiky.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

63. Web developers already familiar with Dynamic HTML (DHTML) will learn XUL quickly and can start building applications right away
Firefox or another Gecko-based browser
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

64. Microsoft Windows Presentation Foundation (WPF)
definuje XAML deklaratívny jazyk pre rozhrania, ktorý beží na vrchu NET.Framework 2.0 a pripomína XUL.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

65. Je to multiparadigmový skriptovací jazyk.
Python
Je to multiparadigmový skriptovací jazyk.
Dokáže vytvárať dynamické web stránky s bohatými ovládacími prvkami (CGI), a zároveň pomocou viazaní na grafické knižnice GTK, Qt a iné tvoriť rozhrania a skripty pre štandardné aplikácie.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

66. SYSTÉMY RIADENIA OBSAHU
Content Management Systems (CMS), sú istými „meta-aplikáciami“. Koncový používateľ má istotu, že modulárnosť, napojenie na databázy ale najmä používateľské rozhranie bolo navrhnuté skúsenými odborníkmi, a on sám potrebuje len naplniť tento systém údajmi, prípadne vykonať menšie modifikácie.
Medzi typické CMS patrí napríklad MediaWiki či Joomla. Zaujímavým príkladom je reBOX, čo je v podstate API na tvorbu webových aplikácii s presne rovnakými ovládacími prvkami ako klasické desktop aplikácie.
Jeden z vrcholných prejavov možností webových technológií je portál Meebo ( Táto stránka ponúka možnosť prihlásiť sa na rôzne IM siete cez webový prehliadač, a aj sa ako štandardný IM klient správa. Na stránke sa vyskytujú okná (dokonca posúvateľné a s nastaviteľnou veľkosťou) s ikonami aj menu.
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

67. Ďaľším prístupom je spojenie vizuálnych editorov so skriptovacími jazykami.
Príkladom sú produkty Macromedia Director (Lingo) a Flash (Action Script) - oba používajú metaforu filmových scenárov, kde je časová os vo forme technického scenára a vrstvami, kde sú paralelne bežiace deje ako aj Authorware, kde vizuálne programovanie pripomína tvorbu grafov toku dát (data flow).
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

68. Okno systému MM Flash
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ

69. Vrstva reprezentovaná nástrojmi pre budovanie modelov.
4. Aplikácie
Vrstva reprezentovaná nástrojmi pre budovanie modelov.
Príkladom sú Microsoft Access, Sybase PowerDesigner.
Táto vrstva je vhodná pre všetky špecifické domény (aplikácia, interakcia, prezentácia), komunikácia dobre s inými subsystémami špecifickej domény, čas vytvorenia rozhrania aplikácie je krátky a je náročná na naučenie sa, dobrá rozšíritľnosť a modularita .
MARTIN ŠPERKA: INTERAKCIA ČLOVEK – POČÍTAČ