CSS (Cascading Style Sheets)

Apa itu CSS ?

• CSS adalah Cascading Style Sheet pengertiannya adalah sekumpulan code pengaturcaraan web yang berfungsi untuk mengendalikan beberapa komponen didalam web sehingga menjadi tampak seragam, berstruktur dan teratur. CSS inilah yang bertanggung jawab atas penampilan web anda dimata pengunjung melalui pelayar internet.CSS yang buruk boleh membuat visitor anda tidak berasa senang lagi melayari blog pengguna lebih-lebih lagi untuk kembali lagi. Memaksimumkan CSS adalah penting (khususnya) blog agar lebih selesa untuk dibaca, dilihat oleh visitor dan kalau bolehmenjadikan CSS yang meringankan loading.

Apa yang boleh dilakukan dengan CSS ?

• CSS adalah bahasa gaya yang menentukan susun atur dokumen HTML. Sebagai contoh, CSS meliputi fon, warna, tepi, garisan, ketinggian, lebar, imej latar belakang, kedudukan maju dan banyak perkara lain. HTML boleh (mis-) digunakan untuk menambah susun atur ke laman web. Tetapi CSS menawarkan lebih banyak pilihan dan lebih tepat dan canggih. CSS disokong oleh semua pelayar hari ini. Selepas hanya beberapa pengajaran dari tutorial ini, pengguna akan dapat membuat lembaran gaya pengguna sendiri dengan menggunakan CSS untuk memberikan laman web pengguna kelihatan baru.

Perbezaan di antara CSS dan HTML?

HTML

• HTML digunakan untuk menstrukturkan kandungan. 
•  HTML bahasa  digunakan untuk menambah struktur kepada teks.

CSS

• CSS digunakan untuk memformat kandungan berstruktur.
• CSS telah dicipta untuk membetulkan keadaan ini dengan menyediakan pereka web dengan peluang susun atur canggih disokong oleh semua pelayar.

Apa itu Reka Bentuk Web Responsif ?

Apa itu Reka Bentuk Web Responsif ?

• Reka bentuk web responsif adalah pendekatan yang mencadangkan bahawa reka bentuk dan pembangunan perlu bertindak balas kepada tingkah laku dan persekitaran pengguna berdasarkan saiz skrin, platform dan orientasi. Amalan ini terdiri daripada campuran grid fleksibel dan susun atur, imej dan penggunaan pintar pertanyaan CSS media. Sebagai suis pengguna dari komputer riba mereka untuk iPad, laman web secara automatik wajar beralih kepada menampung untuk penyelesaian, saiz imej dan skrip kebolehan. Dalam erti kata lain, laman web itu perlu mempunyai teknologi untuk bertindak balas secara automatik untuk pilihan pengguna. Ini akan menghapuskan keperluan untuk reka bentuk yang berbeza dan fasa pembangunan bagi setiap alat baru di pasaran.

Apa itu Bootstrap ?

Assalammualaikum. Hari ini saya ingin berkongsi maksud Bootstrap. Tugasan ini telah diberi oleh pensyarah saya. 

Apa itu Bootstrap ?

• Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan

Untuk apa itu Bootstrap ?

• Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Mengenal Jenis-Jenis Antara Muka

Assalammualaikum. Hari ini saya akan kongsikan jenis-jenis antara muka. Antara muka mempunyai 6 jenis dan ianya berlainan. 


Antara Muka Baris Arahan (Command Line Interface)

• Pengguna menyediakan input dengan menaip satu arahan pada papan kekunci komputer dan sistem bertindak dengan memaparkan teks pada monitor komputer

 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 Interface)

•  Antara muka berpandukan menu  berbeza daripada antara muka baris arahan.  

• Antara muka menu yang didorong menyediakan menu grafik, manakala antara muka baris arahan memerlukan pengguna untuk menaip dalam tindakan tertentu dalam baris arahan. Antara muka berpandukan menu yang didorong tidak memerlukan pengguna untuk menghafal perintah, yang membuat navigasi lebih mudah untuk pengguna. Oleh itu, pengguna memerlukan latihan sedikit apabila menggunakan antara muka berpandukan menu yang didorong oleh. Antara muka berpandukan menu yang didorong juga memerlukan sedikit kuasa pemprosesan komputer, jadi mereka boleh cepat dimuatkan pada kebanyakan peranti.

Antara Muka Segera (Prom User Interface)

• Antaramuka segera 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)

            

• Antaramuka melalui suara membenarkan pengguna berinteraksi dengan menggunakan aplikasi bahasa percakapan.

• Elemen-elemen VUI termasuklah prompts, tatabahasa, dan dialogue logic. 

• Segala rakaman atau ucapan yang telah disintesis dimainkan kepada pengguna semasa dialog

• Seterusnya, tatabahasa akan mengenalpasti segala respon yang diucapkan oleh pengguna. Namun, sistem hanya akan memahamai perkatan-perkataan, ayat serta frasa yang telah sedia ada di dalam tatabahasa.

Antara Muka Pelbagai Modal Pengguna (Multi Modal User Interface)

• Antaramuka Pelbagai Modal Pengguna merujuk kepada interaksi antara maya dan persekitaran fizikal melalui komunikasi mod semula jadi.

• Secara lebih spesifik, sistem pelbagai modal menyediakan persekitaran yang lebih fleksibel, efisyen, dan boleh digunakan bagi membenarkan pengguna untuk berinteraksi melalui kaedah input seperti ucapan, tulisan, isyarat tangan dan pandangan.

Human-Computer Interaction (HCI)

Assalammualaikum. Hari ini pada tarikh 25.6.2015 hari Khamis, saya dan rakan-rakan saya telah mempelajari tentang Human-Computer Interaction. Jadi saya akan berkongsi apa yang telah saya pelajari hari ini.

Definisi Human-Computer Interaction (HCI) :

·         Interaksi manusia dan komputer adalah disiplin ilmu yang mempelajari hubungan antara manusia dan komputer yang meliputi perancangan, evaluasi dan implementasi antaramuka pengguna komputer agar mudah digunakan oleh manusia. Sedangkan interaksi manusia dan komputer sendiri adalah serangkaian proses, dialog dan kegiatan yang dilakukan oleh manusia untuk berinteraksi dengan komputer secara interaktif dengan melaksanakan dan menyelesaikan tugas yang diinginkan.

Tujuan :

·         Sistem yang bermanfaat (usable) dan aman (safe), ertinya sistem tersebut dapat berfungsi dengan baik. Sistem tersebut untuk mengembangkan dan meningkatkan keamanan (safety), utilitas (utility), kebolehgunaan (usability), efektifitas (efectiveness) dan efisiensinya (eficiency). Sistem yang dimaksud konteksnya tidak hanya pada periangkat keras dan perangkat lunak, tetapi juga mencakup lingkungan secara keseluruhan, baik itu lingkungan organisasi masyarakat kerja atau lingkungan keluarga. Sedangkan kebolehgunaan (usability) disini dimaksudkan bahwa sistem yang dibuat tersebut mudah digunakan dan mudah dipelajari baik secara individu ataupun kelompok. Utilitas mengacu kepada fungsionalitas sistem atau sistem tersebut dapat meningkatkan efektifitas dan efesiensi kerjanya.

                               

Matlamat Human-Computer Interaction :

Matlamat HCI adalah untuk menghasilkan sistem yang boleh digunakan dengan selamat, serta sistem yang boleh berfungsi. Dalam usaha untuk menghasilkan sistem komputer dengan kebolehgunaan  yang baik,pemaju mesti cuba :

·         Kaedah untuk mereka bentuk antara muka komputer dengan sekali gus mengoptimumkan reka bentuk untuk hartanah yang diingini.

·         Kaedah untuk melaksanakan antara muka

·         Kaedah untuk menilai dan membandingkan antara muka berkenaan dengan kegunaan mereka

·         Perspektif yang kritikal memikirkan nilai-nilai yang menjadi asas reka bentuk komputer, penggunaan komputer dan amalan penyelidikan HCI

Manusia (pengguna)

·         Pengguna individu atau pengguna sekumpulan berkerja bersama-sama. Penghargaan sistem deria cara rakyat (penglihatan, pendengaran, sentuhan) menyampaikan maklumat adalah penting. Selain itu, pengguna yang berbeza membentuk konsep yang berlainan atau model mental tentang interaksi mereka dan mempunyai cara yang berbeza untuk belajar dan menyimpan pengetahuan. Perbezaan budaya dan negara juga memainkan peranan.

Computer :

·         Komputer merujuk kepada mana-mana teknologi yang terdiri daripada desktop komputer untuk sistem yang berskala besar. Peranti seperti telefon bimbit atau VCR juga boleh dianggap “komputer”.

Interaction :

  ·        Interaksi (HCI) cuba untuk memastikan bahawa kedua-dua mereka mendapatkan di antara satu sama lain dan berinteraksi dengan jayanya. Dalam usaha untuk mencapai sistem yang boleh digunakan, anda perlu memohon apa yang anda tahu tentang manusia dan komputer, dan berbincang dengan pengguna mungkin sepanjang proses reka bentuk. Dalam sistem sebenar, jadual dan bajet adalah penting, dan ia adalah penting untuk mencari keseimbangan antara apa yang akan menjadi ideal untuk pengguna dan apa yang boleh dilaksanakan dalam realiti.

Cara membuat gambar menjadi besar

Assalammualaikum, hari ini pada 23/04/2015 pensyarah saya meminta untuk mencari Kod HTML untuk membuat gambar yang biasa boleh bergerak dan besar bila disentuh.

Cara-cara melakukannya :

• Log in pada Blogger

• Selepas log in, pilih Templete > Edit Html

• Kemudian cari kode </head> dan copy kod berikut dengan tepat di atas kode </head>

<style>#sundaboy img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #sundaboy img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

• Selesai sahaja copy kod tersebut ikut format yang dibawah

<div id="sundaboy">

<a href="http://novanpeace.blogspot.com/"><img src="KODE GAMBAR" /></a></div>

Selesai sahaja copy kod tersebut cuba sentuh pada gambar yang dah dimasukkan itu. Semoga berjaya :)

Mobafire (Mirzan)

Alamat : https://mobafire.com

Pengenalan Tentang Mobafire

• Mobafire adalah laman web tentang league of legends. Ia berfungsi mencari maklumat tentang league of legends. Aplikasi ini ditubuh pada tahun 2009 dan ia sejenis game online bagi seluruh dunia. Selain itu, Mobafire ada 4 jenis maklumat iaitu Builds and guild, Database, Tournament, Community, and watch league. Musim 1 Championship pada bulan Jun 2011, yang telah diadakan di Dreamhack di Sweden,dan telah dipaparkan US $ 100,000 dalam hadiah. Parnassus Eropah Fnatic mengalahkan pasukan dari Eropah, Amerika Syarikat, dan Asia untuk memenangi kejohanan ini dan menerima US $ 50,000 dalam hadiah money. Over 1.6 juta penonton yang menonton siaran yang dialirkan acara itu, dengan puncak lebih daripada 210,000 penonton serentak dalam satu setengah perlawanan akhir. Ia sangat bertuah sesiapa yang memenangi pertandinganya. 

Kaedah Penggunaan Mobafire

• Mencari maklumat
• Mengepostkan gambar
• Dapat menengok league of legends secara live
• Dapat berkogsi maklumat dengan rakan

Kaedah Menggunakan Mobafire

• Masuk ke laman web mobafire
• Daftar masuk jika ada akaun untuk upload maklumat/tidak perlu jika mau baca, atau daftar jika mahu berbincang.
• Jika tidak ada akaun, anda perlu sign up, cara sign up seperti berikut : masukkan nama, email dan password
• Selepas daftar, sahkan akaun melalui email
• Selepas pengesahan anda boleh memberi maklumat dengan menekan edit di artikel tertentu.
• Sesetengah artikel tidak boleh diedit.

Kebaikan Mobafire

• Boleh tengok league of legends di Mobafire
• Boleh memasuki tournament di Mobafire
• Mencari maklumat tentang champion itu seperti, kuasa, barang sesuai untuk champion itu dan kulitnya

Keburukan Mobafire

• Kebanyakkan comment yang tidak sesuai
• Mengepost gambar yang tidak elok
• Tidak semua artikel boleh diubah