Human Computer Interaction

COURSE MODULE

PROGRAMME	DATABASE MANAGEMENT SYSTEM AND WEB APPLICATION
COURSE NAME	HUMAN COMPUTER INTERACTION
CODE NAME	KPD402

CONTENT STANDARD	1. DISCUSS HUMAN COMPUTER INTERACTION
LEARNINGSTANDARD	1.1 Define Human Computer Interaction ( HCI )

PERFORMANCE CRITERIA

1.1.1 Mendefinasi Human Computer Interaction berdasarkan konsep yang standard 1.1.2 Menerangkan interaksi antara manusia dan computer berdasarkan keperluan standard

Definisi Human Computer Interaction HCI HCI  Interaksi manusia computer adalah penyelidikan tentang reka bentuk dan penggunaan teknoligi computer dengan tumpuan khususnya kepada antara muka antara pengguna dengan computer.Para penyeklidik dalam bidang HCI kedua-dua memerhatikan cara manusia berinteraksi dengan computer. Komputer Komputer merupakan sebuah mesin yang dicipta untuk menerima dan mengikuti sesuatu arahan yang diberikan oleh pengguna dan ia membantu penggunanya untuk menyelesaikan sesuatu perkara sama ada ia merumitkan ataupun sebaliknya Interaksi Interaksi merupakan proses memahami,menerima dan memaklumkan respond antara satu sama lain Matlamat dan tujuan HCI Matlamat HCI adalah untuk melahirkan sistem yang boleh digunakan dan selamat, serta sistem berfungsi. Untuk sistem komputer o hasil dengan kebolehgunaan yang baik, pemaju mesti cuba: memahami cara menentukan bagaimana pengguna menggunakan teknologi meningkatkan alat dan teknik untuk mempermudahkan pembinaan sistem yang sesuai mencapai interaksi yang cekap, berkesan dan selamat Kelebihan menggunakan HCI mudah untuk dipelajari dan difahami berkesan dan efektif untuk digunakan selamat dalam proses penggunaan menyeronokkan untuk digunakan

Webpages

Reka bentuk web merangkumi pelbagai kemahiran dan bidang yang berbeza dalam pengeluaran dan penyelenggaraan laman web. Kawasan yang berbeza reka bentuk web termasuk reka bentuk grafik web; reka bentuk antara muka; pengarangan, termasuk kod standard dan perisian hak milik; reka bentuk pengalaman pengguna; dan pengoptimuman enjin carian. Selalunya ramai individu akan bekerja dalam kumpulan yang meliputi pelbagai aspek proses reka bentuk, walaupun beberapa pereka akan meliputi mereka semua. Reka bentuk web jangka biasanya digunakan untuk menggambarkan proses reka bentuk yang berkaitan dengan bahagian depan (sebelah klien) reka bentuk laman web termasuk bertulis tanda atas. Reka bentuk web sebahagiannya bertindih kejuruteraan web dalam skop yang lebih luas daripada pembangunan web. Web designer dijangka mempunyai kesedaran tentang kebolehgunaan dan jika peranan mereka melibatkan mewujudkan tanda sehingga kemudian mereka juga dijangka sehingga tarikh dengan garis panduan akses web.

Responsive Webpage

Responsif reka bentuk web (RWD) adalah satu pendekatan reka bentuk web yang bertujuan menyediakan tontonan optimum dan interaksi pengalaman mudah membaca dan navigasi dengan sekurang-kurangnya saiz semula, panning, dan boleh merentasi pelbagai peranti (dari komputer desktop monitor untuk telefon mudah alih). Konsep fluid grid memerlukan elemen halaman saiz berada dalam unit relatif seperti peratusan, dan bukannya unit mutlak seperti mutlak. Imej fleksibel juga bersaiz dalam unit relatif, untuk menghalangnya daripada memaparkan luar kandungan element mereka. Media queries membolehkan halaman untuk menggunakan peraturan gaya CSS yang berbeza berdasarkan ciri-ciri peranti tapak sedang dipaparkan pada, biasanya pelayar lebar. Reka bentuk web Responsif menjadi lebih penting kerana jumlah trafik mudah alih kini mencakupi lebih separuh daripada jumlah trafik internet. Trend ini begitu berleluasa sehinggakan Google telah mula meningkatkan penarafan laman web yang mudah alih jika carian itu dibuat daripada peranti. 

Definisi Web Degisn

Reka bentuk web merangkumi pelbagai kemahiran dan bidang yang berbeza dalam pengeluaran dan penyelenggaraan laman web. Kawasan yang berbeza reka bentuk web termasuk reka bentuk grafik web; reka bentuk antara muka; pengarangan, termasuk kod standard dan perisian hak milik; reka bentuk pengalaman pengguna; dan pengoptimuman enjin carian. Selalunya ramai individu akan bekerja dalam kumpulan yang meliputi pelbagai aspek proses reka bentuk, walaupun beberapa pereka akan meliputi mereka all.The reka bentuk web jangka biasanya digunakan untuk menggambarkan proses reka bentuk yang berkaitan dengan bahagian depan (sebelah klien) reka bentuk laman web yang termasuk menulis tanda atas. Reka bentuk web sebahagiannya bertindih kejuruteraan web dalam skop yang lebih luas daripada pembangunan web. Web designer dijangka mempunyai kesedaran tentang kebolehgunaan dan jika peranan mereka melibatkan mewujudkan tanda sehingga kemudian mereka juga dijangka sehingga tarikh dengan garis panduan akses web

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

       Cascading Style Sheets (CSS) adalah bahasa lembaran gaya yang digunakan untuk menerangkan rupa dan format dokumen ditulis dalam bahasa markup. Walaupun yang paling sering digunakan untuk mengubah gaya laman web dan antara muka pengguna yang ditulis dalam HTML dan XHTML, bahasa yang boleh digunakan untuk apa-apa jenis dokumen XML, termasuk XML biasa, SVG dan Xul. Bersama-sama dengan HTML dan JavaScript, CSS adalah teknologi asas yang digunakan oleh kebanyakan laman web untuk mencipta halaman web secara visual yang menarik, antara muka pengguna untuk aplikasi web, dan antara muka pengguna untuk banyak aplikasi mudah alih.

       CSS direka terutamanya untuk membolehkan pemisahan kandungan dokumen daripada persembahan dokumen, termasuk unsur-unsur seperti susun atur, warna, dan fon. Pemisahan ini boleh meningkatkan akses kandungan, menyediakan lebih banyak fleksibiliti dan kawalan dalam spesifikasi ciri-ciri persembahan, membolehkan berbilang halaman HTML untuk berkongsi format dengan menentukan CSS yang berkenaan dalam fail Css yang berasingan, dan mengurangkan kerumitan dan pengulangan dalam kandungan struktur, seperti meja semantik tidak penting yang telah digunakan secara meluas untuk laman format sebelum rendering CSS konsisten boleh didapati dalam semua pelayar utama . CSS membolehkan untuk memisahkan arahan persembahan daripada kandungan HTML dalam fail atau gaya bahagian yang berasingan daripada fail HTML. Bagi setiap yang hampir sama unsur HTML, ia menyediakan satu senarai arahan pemformatan. Sebagai contoh, peraturan CSS mungkin menyatakan bahawa "semua menuju 1 elemen harus berani", meninggalkan tulen semantik HTML markup yang menegaskan "teks ini adalah tahap 1 tajuk" tanpa pemformatan kod seperti <bold> tag yang menunjukkan teks bagaimana sedemikian hendaklah dipaparkan.

       Ini pemisahan format dan kandungan menjadikan ia mungkin untuk mengemukakan halaman markup yang sama dalam gaya yang berbeza untuk kaedah persembahan yang berbeza, seperti pada skrin, di cetak, melalui suara (apabila dibacakan oleh pelayar atau skrin pembaca berdasarkan ucapan) dan berdasarkan braille, peranti sentuhan. Ia juga boleh digunakan untuk memaparkan laman web yang berbeza bergantung kepada saiz skrin atau peranti di mana ia dilihat. Walaupun pengarang halaman web biasanya Pautan ke fail CSS dalam fail markup, pembaca boleh menentukan lembaran gaya yang berbeza, seperti fail CSS yang disimpan pada komputer mereka sendiri, untuk mengatasi apa-apa yang penulis telah ditetapkan. Jika pengarang atau pembaca tidak mengaitkan dokumen itu kepada lembaran gaya, gaya lalai pelayar akan digunakan. Satu lagi kelebihan CSS adalah bahawa perubahan estetik reka bentuk grafik dokumen (atau beratus-ratus dokumen) boleh digunakan dengan cepat dan mudah, dengan mengedit beberapa baris dalam satu fail, dan bukannya melalui proses susah payah (dan dengan itu mahal) merangkak atas setiap baris dokumen demi baris, menukar markup.

       Spesifikasi CSS menerangkan skim keutamaan untuk menentukan gaya peraturan memohon jika lebih daripada satu peraturan perlawanan terhadap elemen tertentu. Dalam apa yang dipanggil lata, keutamaan (atau berat) dikira dan diberikan kepada kaedah-kaedah, supaya keputusan yang boleh diramal.

Definisi Bootstrap serta kelebihannya

Bootstrap adalah satu rangka kerja depan yang kuat untuk lebih cepat dan lebih mudah pembangunan web. Ia termasuk HTML dan CSS berdasarkan template reka bentuk untuk komponen antara muka pengguna biasa seperti Typography, Borang, Butang, Jadual, navigasi, Dropdowns, Isyarat, Modals, Tab, Accordion, Carousel dan banyak yang lain dan juga pilihan JavaScript sambungan.

       Bootstrap juga memberi anda keupayaan untuk membuat susun atur responsif dengan lebih kurang usaha.

Kelebihan Bootstrap

·         Kelebihan terbesar menggunakan Bootstrap adalah bahawa ia datang dengan set percuma alat untuk mewujudkan susun atur web fleksibel dan responsif serta komponen antara muka yang sama.

·         Selain itu, dengan menggunakan Bootstrap API data anda boleh membuat komponen antara muka maju seperti Scrollspy dan Typeaheads tanpa menulis satu baris JavaScript.

Berikut adalah beberapa kelebihan yang lebih, mengapa seseorang itu perlu memilih Bootstrap:

·         Menjimatkan banyak masa - Anda boleh menjimatkan banyak masa dan usaha menggunakan Bootstrap reka bentuk yang telah ditetapkan template dan kelas dan menumpukan perhatian kepada kerja pembangunan yang lain.

·         Ciri-ciri responsif - Menggunakan Bootstrap anda boleh dengan mudah membuat reka bentuk responsif. Bootstrap ciri responsif membuat laman web anda muncul lebih sesuai pada peranti dan resolusi skrin yang berbeza tanpa apa-apa perubahan dalam markup.

·         Reka bentuk konsisten - Semua komponen Bootstrap berkongsi template reka bentuk yang sama dan gaya melalui perpustakaan pusat, supaya reka bentuk dan susun atur laman web anda adalah konsisten di seluruh pembangunan anda.

·         Mudah untuk digunakan - Bootstrap adalah sangat mudah untuk digunakan. Sesiapa sahaja dengan pengetahuan kerja asas HTML dan CSS boleh memulakan pembangunan dengan Bootstrap.

·         Sesuai dengan pelayar - Bootstrap dicipta dengan pelayar moden dalam fikiran dan ia adalah serasi dengan semua pelayar moden seperti Mozilla Firefox, Google Chrome, Safari, Internet Explorer dan Opera.

·         Open Source - Dan yang lebih menarik ialah, ia adalah percuma untuk memuat turun dan digunakan.

Maklumat Human Computer Interaction HCI

Definisi Human Computer Interaction HCI

HCI  Interaksi manusia computer adalah penyelidikan tentang reka bentuk dan penggunaan teknoligi computer dengan tumpuan khususnya kepada antara muka antara pengguna dengan computer.Para penyeklidik dalam bidang HCI kedua-dua memerhatikan cara manusia berinteraksi dengan computer.

Komputer

Komputer merupakan sebuah mesin yang dicipta untuk menerima dan mengikuti sesuatu arahan yang diberikan oleh pengguna dan ia membantu penggunanya untuk menyelesaikan sesuatu perkara sama ada ia merumitkan ataupun sebaliknya

Interaksi

Interaksi merupakan proses memahami,menerima dan memaklumkan respond antara satu sama lain

Matlamat dan tujuan HCI

Matlamat HCI adalah untuk melahirkan sistem yang boleh digunakan dan selamat, serta sistem berfungsi. Untuk sistem komputer o hasil dengan kebolehgunaan yang baik, pemaju mesti cuba:

memahami cara menentukan bagaimana pengguna menggunakan teknologi

meningkatkan alat dan teknik untuk mempermudahkan pembinaan sistem yang sesuai

mencapai interaksi yang cekap, berkesan dan selamat

Kelebihan menggunakan HCI

mudah untuk dipelajari dan difahami

berkesan dan efektif untuk digunakan

selamat dalam proses penggunaan

menyeronokkan untuk digunakan