Web Design

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.

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 beberapa halaman HTML untuk berkongsi format dengan menentukan CSS yang berkenaan dalam fail Css yang berasingan, dan mengurangkan kerumitan dan pengulangan dalam kandungan struktur, seperti jadual 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.


Spesifikasi CSS dikekalkan oleh World Wide Web Consortium (W3C). Jenis media Internet (jenis MIME) Teks / css didaftarkan untuk digunakan dengan CSS oleh RFC 2318 (Mac 1998). W3C mengendalikan perkhidmatan pengesahan CSS percuma untuk dokumen CSS.

Apa itu Web Responsive

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. 

BOOTSTRAP

BOOTSTRAP

Bootstrap adalah front-end framework yang solek, baik dan luar biasa yang mengedapankan paparan untuk mobile device (Handphone, smartphone dll.) Penggunaan ini mempercepat dan mempermudahkan pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan. 

APA ITU BOOTSTRAP?

Bootstrap merupakan framework (Rangka Kerja) untuk membangunkan design web secara responsif. Maksudnya, paparanweb yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini boleh diaktifkan ataupun tidak diaktifkan sesuai dengan keinginan kita sendiri sehingga kita boleh membuat web untuk memaparkan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak boleh beradaptasi sesuai layar. Dengan bootstrap kita juga boleh membangunkan web dinamik ataupun statik.

Definisi Bootstrap

Bootstrap adalah koleksi alat percuma dan sumber terbuka untuk membina laman web dan aplikasi web. Ia mengandungi HTML- dan template reka bentuk berasaskan CSS untuk tipografi, borang, butang, pelayaran dan komponen antara muka lain, serta JavaScriptextensions pilihan. Ia bertujuan untuk memudahkan pembangunan laman web dinamik dan aplikasi web.

Bootstrap, pada asalnya dinamakan Twitter Blueprint, telah dibangunkan oleh Mark Otto dan Yakub Thornton di Twitter sebagai rangka kerja untuk menggalakkan konsisten di seluruh alat dalaman. Sebelum Bootstrap, pelbagai perpustakaan telah digunakan untuk pembangunan antara muka, yang membawa kepada percanggahan dan beban penyelenggaraan yang tinggi.

Selepas beberapa bulan pembangunan oleh sekumpulan kecil, banyak pemaju di Twitter mula menyumbang kepada projek itu sebagai sebahagian daripada Hack Minggu, seminggu gaya hackathon untuk pasukan pembangunan Twitter. Ia telah dinamakan semula dari Twitter Rangka Tindakan untuk Bootstrap, dan dikeluarkan sebagai satu projek sumber terbuka pada 19 Ogos, 2011. Ia terus dikekalkan oleh Mark Otto, Yakub Thornton, dan sekumpulan kecil pemaju teras, serta komuniti besar pencarum

Pada 31 Januari, 2012, Bootstrap 2 diumumkan. Siaran akhbar ini menambah susun atur dua belas tiang grid dan komponen reka bentuk responsif, serta perubahan kepada banyak komponen yang sedia ada. Pembebasan Bootstrap 3 diumumkan pada 19 Ogos, 2013, berpindah ke pendekatan pertama mudah alih dan menggunakan yang reka bentuk reka.

Pada 23 April 2015, Mark Otto mengumumkan Bootstrap 4 adalah dalam pembangunan.

Bootstrap serasi dengan versi terbaru Google Chrome, Firefox, Internet Explorer, Opera, dan pelayar Safari, walaupun sesetengah penyemak imbas ini tidak disokong di semua platform.

Sejak versi 2.0 ia juga menyokong responsif reka bentuk web. Ini bermakna susun atur laman web menyesuaikan dinamik, dengan mengambil kira ciri-ciri peranti yang digunakan (desktop, tablet, telefon bimbit).

Bermula dengan versi 3.0, Bootstrap mengamalkan falsafah reka bentuk mudah alih pertama, menekankan reka bentuk responsif secara lalai.

Bootstrap adalah sumber terbuka dan boleh didapati GitHub. Pemaju digalakkan untuk mengambil bahagian dalam projek itu dan memberi sumbangan mereka sendiri untuk platform.

Jenis-jenis antara muka (user interface)

Antara muka baris arahan ( Command-line Interface / CLI )

• CUI  juga adalah satu cara untuk berinteraksi dengan program komputer di mana pengguna ( atau pelanggan) mengeluarkan arahan dengan menaip arahan pada papan kekunci kepada program ini dalam bentuk baris berturut-teks (baris arahan).
• Kemudian sistem bertindak memaparkan teks pada monitor komputer.CLI adalah cara utama untuk interaksi dengan sistem komputer yang paling berkesan. 

Antara muka grafik ( Graphical User Interface )

• Antara muka grafik menerima input melalui peranti seperti papan kekunci komputer dan tetikus dan menyediakan output grafik pada monitor komputer.
• Antara muka grafik digunakan untuk manipulasi ikon secara terus dengan menggerakkan sesuatu peranti contohnya tetikus untuk melaksanakan tugas tertentu. Sebagai contoh, memindahkan satu fail dari satu folder ke dalam folder yang lain dengan menggunakan tetikus.

Antara muka berpandukan menu ( Menu-driven User Interfaces )

• Antara muka menu yang direka dengan baik adalah mudah untuk digunakan, dan hanya ikut arahan serta membuat pilihan anda.
• Antara muka ini membolehkan anda berinteraksi/mencapai arahan dengan komputer atau peranti dengan melalui satu siri skrin atau menu.

Antara Segera ( Prompt User Interface )

• Ia mempercepatkan pengguna untuk memasukkan input, meminta maklumat serta pergi ke langkah yang seterusnya.
• Sebagai contoh, komputer meminta pengguna untuk memasukkan ID pengguna dan kata laluan untuk terus pergi ke antaramuka yang berikutnya.

Antara muka Melalui Suara ( Voice User Interface / VUI )

• Membolehkan interaksi dilakukan diantara manusia dengan komputer melalui platform suara / ucapan untuk memulakan perkhidmatan automatik atau proses. VUI adalah antara muka kepada mana-mana pengguna untuk bersuara.
• Ia adalah fiksyen sains yang dapat mengawal mesin dengan hanya bercakap dalam masa yang singkat. 

Antara muka Pelbagai Modal Pengguna ( Multi-modal User Interfaces )

• Merujuk kepada interaksi dengan persekitaran maya dan fizikal melalui komunikasi kaedah semula jadi. ia melibatkan lima deria manusia.
• Ini menunjukkan bahawa interaksi pelbagai mod membolehkan komunikasi yang lebih bebas dan semula jadi, muka pengguna dengan sistem automatik dalam kedua-dua input dan output. 
• Secara  khusus, sistem multimodal boleh menawarkan sistem fleksibel, cekap dan boleh digunakan untuk pelbagai persekitaran yang membolehkan pengguna untuk berinteraksi melalui kaedah input dan output.

Definisi HCI

Perkembangan komputer sedemikian cepat hingga saat ini komputer menjadi kebutuhan primer bagi pelajar, khususnya mahasiswa serta untuk mengerjakan berbagai pekerjaan dalam perbankan, transportasi, penerbangan, dan hampir semua instansi atau perkantoran memerlukan komputer. Kehadiran komputer ini sangat membantu manusia. Dengan adanya komputer, pekerjaan bisa lebih cepat dan efektif.

Saat kita menggunakan komputer,  kita sedang berinteraksi dengan komputer. Kita melakukan dialog dengan sistem komputer. Kita memberikan perintah kepada sistem dan kemudian sistem tersebut menanggapi, dan demikian seterusnya hingga pekerjaan selesai. Studi tentang interaksi manusia dengan komputer disebut human computer interaction (HCI), yaitu suatu disiplin ilmu yang menekankan pada aspek desain, evaluasi, dan implementasi dari sistem komputer interaktif untuk kegunaan manusia dengan mempertimbangkan fenomena di sekitar manusia itu sendiri. (ACM SIGCHI, 1992)HCI bukan sekedar mempelajari komputer atau mempelajari manusia, tetapi menjadi jembatan untuk menghubungkan manusia dengan komputer.

Sistem komputer dibuat untuk digunakan oleh manusia. Oleh karena itu, ada beberapa aspek yang perlu diperhatikan, yaitu aspek manusia, program, dan  mesin. Komputer didesain untuk bisa dipahami oleh manusia. Komputer diisi software yang berisi berbagai program-program untuk melakukan tugas. Program tersebut harus bisa dipahami oleh manusia sehingga harus memperhatikan kondisi psikologi, linguistic, sosiologi manusia. 

Prinsip kerja HCI adalah input—proses—output. Dengan demikian, satu set komputer mempunyai perangkat masukan, proses, dan keluaran. Perangkat masukan bisa berupa keyboard, mouse, dan media input lainnya.  Masukan (input)  dari pengguna bisa berupa garis, gerakan mouse, sentuhan keyboard, dan sebagainya. Input tersebut kemudian diproses oleh komputer sehngga mucul hasilnya berua grafik, bunyi, tulisan, dan sebagainya pada piranti keluaran (monitor, printer, dll). Prinsip kerja HCI ini sama dengan prinsip proses komunikasi antar manusia. Dalam proses komunikasi ada source, message, channel,  receiver, feedback. Begitu juga dalam interaksi dengan komputer. Pengguna komputer sebagai source yang mengirimkan pesan kepada komputer melalui piranti input yang kemudian diterima komputer (receiver), diproses, dan ditampilkan hasilnya sebagai feedback melalui monitor.

Kehadiran komputer ini juga membantu dalam proses komunikasi manusia dengan manusia. Sistem komputer ini tidak hanya diterapkan dalam alat yang disebut komputer, tapi diterapkan juga dalam handphone. Selain itu, komputer sekarang ini selalu mengalami inovasi sehingga ukurannya lebih kecil dan praktis. Komputer ini telah mendorong ditemukannya internet yang kemudian keduanya bersatu sehingga lebih produktif. Dengan adanya komputer dan internet, seseorang bisa berkomunikasi dengan orang lain menggunakan email dan juga video confefernce. Mereka bisa bertukar foto, bertukar data dan sebagainya. Komputer bahkan dibuat bisa bersuara sehingga seolah-olah mereka sedang berbicara face to face. 

Sistem komputer juga menjadi jiwa dari sebuah robot. Robot diisi dengan program yang disebut dengan kecerdasan buatan (artificial intelligent) sehingga bisa melakukan perintah seperti yang dikehendaki manusia. Dengan bentuknya yang mirip dengan makhluk hidup (manusia atau binatang) interaksinya menjadi lebih terasa nyata. Saat ini robot diciptakan semakin pintar sehingga bisa menjalankan kegiatan seperti manusia. Seperti di Jepang, ada robot yang bisa menjadi pelayan toko yang bisa melayani pelanggan. Mobil yang dilengkapi dengan peralatan yang bisa mendeteksi suara sehingga bisa menerima perintah langsung dan bekerja sesuai perintah.