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.