implementation support

(Pendukung implementasi)
 Implementation
support (pendukung implementasi)
programming tools (perangkat pemograman)
levels of services for programmers (tingkat
pelayanan untuk programer)
windowing systems (sistem windowing)
core support for separate and simultaneous user-
system activity (dukungan utama untuk terpisah dan simultan user-sistem
kegiatan)
programming the application and control of
dialogue (pemrograman aplikasi dan pengendalian dialog)
interaction toolkits (interaksi toolkits)
bring programming closer to level of user perception
(membawa pemograman mendekati tingkat persepsi pengguna)
user interface management systems (manajemen
sistem antarmuka pengguna)
controls relationship between presentation and
functionality (mengontrol hubungan antara presentasi dan fungsionalitas)
Introduction (pengenalan)

How does HCI affect of the programmer?

(Bagaimana HCI mempengaruhi programmer?)

Advances in coding have elevated programming

(Kemajuan dalam pengkodean memiliki program peningkatan)
hardware specific (khusus hardware)
interaction-technique specific
(interaksi-teknik tertentu)

Layers of development tools (Lapisan alat pengembangan)

windowing systems (sistem windows)
interaction toolkits (interaksi toolkits)
user interface management systems (manajemen
sistem antarmuka pengguna)
Elements of windowing
systems (Elemen dari sistem windowing)
Device independence (perangkat penting)

programming the abstract terminal device drivers

image models for output and (partially) input
(pemrograman yang perangkat driver untuk terminal model abstrak gambar untuk output
dan (sebagian) Input)
Pixels
PostScript (MacOS X, NextStep)
Graphical Kernel System (GKS)
Programmers' Hierarchical Interface to Graphics (PHIGS)
Resource sharing (Berbagi sumber daya)
achieving simultaneity of user tasks (mencapai
simultanitas dari tugas-tugas pengguna)
window system supports independent processes (sistem
window mendukung proses yang independen)
isolation of individual applications (mengisolasi
setiap aplikas)
 Architectures of windowing
systems (Arsitektur sistem windowing)
three possible software architectures (ada
3 kemungkinan arsitektur perangkat lunak)
all assume device driver is separate
(diasumsikan bahwa semua device driver tersebut terpisah)
differ in how multiple application management is
implemented (perbedaan pada bagaimana manajemen beberapa aplikasi
diimplementasikan)
1. each application manages all processes
(setiap aplikasi mengelola seluruh proses)
everyone worries about synchronization (semua
orang khawatir tentang sinkronisasi)
reduces portability of applications (mengurangi portabilitas aplikasi)

2. management role within kernel of operating system

(peran manajemen dalam kernel dari sistem operasi)
applications tied to operating system (aplikasi
yang terikat pada sistem operasi)

3. management role as separate application

(peran management sebagai aplikasi yang terpisah)
maximum portability (portabilitas maksimum)
X Windows architecture
(ctd)
pixel imaging model with some pointing
mechanism (menunjukkan gambar piksel dengan model suatu mekanisme)

X protocol defines server-client communication

(X mendefinisikan protokol komunikasi server-client)

separate window manager client enforces

policies for input/output: (pengelola klien window tersendiri
memberlakukan kebijakan untuk input / output)
how to change input focus (bagaimana mengubah fokus input)
tiled vs. overlapping windows (keramik vs tumpang tindih windows)
inter-client data transfer (client saling mentransfer data)
Programming the application 1 (Aplikasi
pemograman 1)

read-evaluation loop
(membaca evaluasi lingkaran)

repeat
read-event(myevent)
case myevent.type
type_1:
do type_1 processing
type_2:
do type_2 processing
...
type_n:
do type_n processing
end case
end repeat
 Programming the application - 1
notification-based
(Pengetahuan dasar)

void main(String[] args) {

Menu menu = new Menu();
menu.setOption(Save);
menu.setOption(Quit);
menu.setAction(Save,mySave)
menu.setAction(Quit,myQuit)
...
}

int mySave(Event e) {
// save the current file
}

int myQuit(Event e) {
// close down
}
going with the grain
system style affects the interfaces
(model sistem akan mempengaruhi antarmuka)
modal dialogue box (modal dialog box)
easy with event-loop (mudah
menggunakan Event loop ) (just have extra read-event loop)
(hanya memiliki ekstra membaca-peristiwa loop)
hard with notification
(pemberitahuan dengan drive ) (need lots of mode flags)
(perlu banyak mode flags)

non-modal dialogue box (bukan modal dialog box)

hard with event-loop (very complicated main loop)
easy with notification (just add extra handler)

beware! (berhati-hatilah!)
if you dont explicitly design it will just happen
implementation should not drive design
(jika Anda tidak secara tegas mendesainnya hanya akan terjadi pelaksanaan tidak harus drive desain)
 Using toolkits

Interaction objects (interaksi objek)

input and output
intrinsically linked (hubungan input-output)

move press release move

Toolkits provide this level of abstraction (Toolkit

ini memberikan tingkat abstraksi)
programming with interaction objects (or (pemrograman interaksi objek)
techniques, widgets, gadgets) (teknik, widget, gadget)
promote consistency and generalizability
(meningkatkan konsistensi dan generalisasi)
through similar look and feel (melewati tampilan dan nuansa yang sama)
amenable to object-oriented programming (bisa
menerima pemrograman berorientasi obyek)
 interfaces in Java
Java toolkit AWT (abstract windowing toolkit)

Java classes for buttons, menus, etc. (kelas

java untuk tombol, menu, dll)

Notification based; (berdasarkan pemberitahuan)

AWT 1.0 need to subclass basic widgets (AWT
1.0 - perlu widget subkelas mendasar)

AWT 1.1 and beyond - callback objects (AWT 1,1

dan seterusnya - objek panggil ulang)

Swing toolkit
built on top of AWT higher level features (dibangun di
atas AWT - fitur tingkat yang lebih tinggi)

uses MVC architecture (see later) (menggunakan

arsitektur MVC (lihat kemudian))
 User Interface Management Systems
(UIMS)
(Pengguna Sistem Manajemen Interface)

UIMS add another level above toolkits (UIMS

menambahkan tingkat pada toolkit)
toolkits too difficult for non-programmers (toolkits
terlalu sulit untuk non-programmer)

concerns of UIMS (kekhawatiran dari UIMS)

conceptual architecture (konsep arsitektur)
implementation techniques (teknik pelaksanaan)
support infrastructure (dukungan infrastruktur)

non-UIMS terms: (istilah non-UIMS )

UI development system (UIDS) (UI pengembangan sistem (UID))
UI development environment (UIDE) (UI
pengembangan lingkungan (UIDE))
e.g. Visual Basic (misalnya Visual Basic)
 UIMS as conceptual architecture
(UIMS sebagai konsep arsitektur )

separation between application semantics and

presentation (jarak antara semantik aplikasi dan presentasi)

improves: (Penambahan)
portability runs on different systems (portabilitas -
dijalankan pada sistem yang berbeda)

reusability components reused cutting costs (usabilitas

- komponen digunakan kembali untuk memotong biaya)

multiple interfaces accessing same functionality

(berbagai interface - mengakses fungsi yang sama)

customizability by designer and user (customizability -

oleh desainer dan user)
 UIMS tradition interface
layers / logical components
(tradisi UIMS - lapisan interface / komponen yang logis)
linguistic: lexical/syntactic/semantic

Seeheim:
presentation dialogue application

Arch/Slinky

dialogue
func. core
adaptor lexical

functional
core physical
 Seeheim model
(model seeheim)

lexical syntactic semantic

Functionality
Dialogue
USER
USER Presentation (application APPLICATION
Control
interface)

switch
 conceptual vs.
implementation
(konsep vs implementasi)

Seeheim
arose out of implementation experience (timbul
dari implementasi pengalaman)

but principal contribution is conceptual (tapi

kontribusi utamanya adalah konsep)

concepts part of normal UI language (konsep

bagian dari bahasa 'normal' UI)

because of Seeheim (karena Seeheim)

we think differently! (kita berpikir secara berbeda!)
e.g. the lower box, the switch(misalnya box lebih rendah, switch)
needed for implementation (diperlukan
untuk pelaksanaan) presentation dialogue application

but not conceptual

(tetapi tidak untuk konsep)
 semantic feedback
(semantik umpan balik)
different kinds of feedback: (berbagai jenis umpan balik)

lexical movement of mouse (leksikal - gerakan mouse)

syntactic menu highlights (sintaksis - Menu Sorotan)
semantic sum of numbers changes (semantik
perubahan jumlah nomor)

semantic feedback often slower

(umpan balik semantik seringkali lambat)

use rapid lexical/syntactic feedback (menggunakan

yang cepat leksikal / sintaksis umpan balik)

but may need rapid semantic feedback (tapi

mungkin perlu tanggapan semantik yang cepat)

freehand drawing (lukisan tangan)

highlight trash can or folder when file dragged
(tempat sampah bisa atau sorot folder ketika file menyeret)
 whats this? (Apa ini?)

Lexical Syntactic Semantic

Application
Dialogue
USER Presentation Interface APPLICATION
Control
Model
 the bypass/switch
(pemintas / switch)

Lexical Syntactic Semantic

Application
Dialogue
USER Presentation Interface APPLICATION
Control
Model

direct communication
rapidsemantic between application
and presentation
feedback but regulated by
(komunikasi secara langsung
antara aplikasi dan persentasi)

dialogue control
(tetapi diatur oleh
Dialog pengendalian)
 more layers!

dialogue
func. core
adaptor lexical

functional
core physical
 Arch/Slinky

more layers! distinguishes lexical/physical (banyak lapisan! -

Membedakan leksikal / fisik)

like a slinky spring different layers may be thicker

(more important) in different systems (seperti sebuah pegas 'Slinky'
lapisan yang berbeda mungkin lebih tebal (lebih penting) dalam sistem yang berbeda)

or in different components (atau komponen yang berbeda)

dialogue
func. core
adaptor lexical

functional
core physical
 monolithic vs. components
(monolitik vs komponen)

Seeheim has big components (Seeheim memiliki komponen

yang besar)

often easier to use smaller ones (eringkali lebih mudah

digunakan yang lebih kecil)
esp. if using object-oriented toolkits (esp. jika menggunakan
berorientasi objek toolkit)

Smalltalk used MVC modelviewcontroller (Smalltalk

digunakan MVC - Model-view-controller)
model internal logical state of component (model - keadaan logis
internal dari komponen)
view how it is rendered on screen (melihat - bagaimana hal itu
ditampilkan di layar)
controller processes user input (controller - proses input
pengguna)
 MVC
model - view - controller

view

model

controller
 MVC issues
(Isu MVC)
MVC is largely pipeline model: (MVC adalah Model
sebagian besar saluran jaringan)

input control model view output

but in graphical interface (tetapi dalam interface berbasis
grafik)
input only has meaning in relation to output (input hanya memiliki
arti sehubungan dengan keluaran)

e.g. mouse click (misalnya klik mouse)

need to know what was clicked (harus mengetahui apa yang sedang diklik)
controller has to decide what to do with click (pengontrol harus
memutuskan apa yang harus dilakukan dengan sekali klik)
but view knows what is shown where! (namun tampilan harus tahu apa yang akan
ditampilkan dan yang mana!)

in practice controller talks to view (dalam 'pertemuan'

praktek pengontrol untuk menampilkan)
separation not complete (pemisah yang belum lengkap)
 PAC model (Model PAC)

PAC model closer to Seeheim (PAC model yang mendekati

Seeheim)
abstraction logical state of component (abstraksi - keadaan logis dari
komponen)
presentation manages input and output (presentasi - mengelola input
dan output)
control mediates between them (kontrol - perantara antara mereka)

manages hierarchy and multiple views (mengelola hirarki dan

beberapa tampilan)
control part of PAC objects communicate (pengendalian merupakan
bagian dari objek berkomunikasi PAC)

PAC cleaner in many ways (PAC pembersih dalam banyak hal)

but MVC used more in practice (tetapi MVC lebih
banyak menggunakan praktek)
(e.g. Java Swing)
 PAC
presentation - abstraction - control

A P A P
C C

abstraction presentation

control

A P
C A P
C
 Implementation of UIMS
(Pelaksanaan UIMS)

Techniques for dialogue controller (Teknik untuk pengontrol dialog)

menu networks (menu jaringan)

grammar notations (notasi tatabahasa event languages (bahasa kejadian)
declarative languages (bahasa deklaratif) constraints (kendala)
graphical specification (grafis spesifikasi)
state transition diagrams (keadaan transisi diagram)
for most of these see chapter 16 (untuk sebagian besar lihat bab 16)
N.B. constraints
instead of what happens say what should be true (bukan apa yang terjadi
mengatakan apa yang harus benar)
used in groupware as well as single user interfaces (digunakan dalam groupware
serta antarmuka satu pengguna)

(ALV - abstractionlinkview)

see chapter 16 for more details on several of these

graphical specification
(grafis spesifikasi)
what it is (apa itu)

draw components on screen (digambar komponen pada tampilan)

set actions with script or links to program (mengatur

tindakan dengan script atau link ke program)

in use (kegunaan)

with raw programming most popular technique (dengan

teknik pemrograman yang baku yang paling terkenal)

e.g. Visual Basic, Dreamweaver, Flash (misalnya

Visual Basic, Dreamweaver, Flash)

local vs. global (lokal vs secara global)

hard to see the paths through system

(sulit untuk 'melihat' melalui jalur sistem)

focus on what can be seen on one screen (berfokus

pada apa yang dapat dilihat pada satu layar)
 The drift of dialogue
control
(Penyimpangan pengendalian dialog)
internal control (pengendalian internal)

(e.g., read-evaluation loop) (contoh, membaca-mengulang evaluasi)

external control (pengendalian ekternal)

(independent of application semantics or

presentation) (independen dari semantik aplikasi atau presentasi)

presentation control (pengendalian persentasi)

(e.g., graphical specification) (misalnya, spesifikasi grafis)

Summary (Rangkuman)
Levels of programming support tools
(Tingkat alat pendukung pemrograman)

Windowing systems (sistem windows)

device independence (perangkat penting)

multiple tasks (beberapa tugas)
Paradigms for programming the application
(Paradigma untuk pemrograman aplikasi)
read-evaluation loop (membaca evaluasi lingkaran)
notification-based (pengetahuan dasar)
Toolkits
programming interaction objects (pemrograman berinteraksi objek)

UIMS
conceptual architectures for separation (konsep
arsitektur untuk pemisahan)
techniques for expressing dialogue (teknik untuk menyampaikan dialog)