Front End and Back End

Apa itu bahagian depan dan belakang akhir ?

Dalam kejuruteraan perisian, istilah "akhir hadapan" dan "akhir belakang" adalah perbezaan yang merujuk kepada pemisahan kebimbangan antara lapisan persembahan dan masing-masing lapisan akses data.

Bahagian hadapan adalah satu antara muka antara pengguna dan akhir belakang. Depan dan hujung belakang boleh diagihkan antara satu atau lebih sistem.

Dalam seni bina perisian, mungkin ada banyak lapisan di antara perkakasan dan pengguna akhir. Setiap boleh diperkatakan sebagai mempunyai bahagian depan dan bahagian belakang. Hadapan adalah abstrak yang, memudahkan komponen asas dengan menyediakan antara muka mesra pengguna.

Dalam reka bentuk perisian, contohnya, seni bina model-view-controller menyediakan depan dan belakang berakhir untuk pangkalan data, pengguna dan komponen pemprosesan data. Pemisahan sistem perisian ke depan dan hujung belakang memudahkan pembangunan dan memisahkan penyelenggaraan. Satu peraturan ibu jari adalah bahawa hadapan (atau "pelanggan") pihak adalah mana-mana komponen dimanipulasi oleh pengguna. Pelayan-sampingan (atau "akhir belakang") kod tinggal pada pelayan. Kekeliruan ini timbul apabila seseorang itu perlu membuat suntingan depan untuk fail pelayan-sampingan. Kebanyakan pereka HTML, misalnya tidak perlu untuk berada di pelayan apabila mereka membangun HTML sebaliknya  jurutera pelayan-sampingan, mengikut definisi, tidak pernah pada apa-apa tetapi pelayan. Ia mengambil masa kedua untuk akhirnya membuat fungsi, laman web interaktif.

Untuk subsistem komputer utama, pengurus fail grafik adalah akhir hadapan untuk sistem fail komputer dan antara muka shell dengan sistem operasi. Bahagian hadapan muka pengguna dan akhirnya kembali melancarkan program sistem operasi sebagai tindak balas.

Menggunakan antara muka baris perintah (CLI) memerlukan pengambilalihan istilah khas dan hafalan arahan, jadi antara muka pengguna grafik (GUI) bertindak sebagai persekitaran desktop akhir hadapan sebaliknya. Dalam persekitaran Unix, ncurses adalah lebih mudah, akhir hadapan separuh grafik untuk CLI. Pada peringkat Unix CLI sendiri, paling bait aliran berorientasikan (iaitu, menggunakan stdin / stdout / stderr sebagai antara muka mereka) program bertindak sebagai penapis-berdiri sendiri program-program yang juga boleh berfungsi sebagai hujung depan dan belakang berakhir untuk program lain. (Mereka berfungsi dengan data paip antara mereka sendiri, kebanyakannya untuk pemprosesan teks; sebagai contoh: $ perkataan grep ~ pengguna / dir / infile | jenis | tee ~ pengguna / dir / outfile)

Dalam pengkomputeran rangkaian, bahagian depan boleh merujuk kepada mana-mana perkakasan yang mengoptimumkan atau melindungi trafik rangkaian. Ia dipanggil permohonan perkakasan depan kerana ia diletakkan di atas menghadap ke luar-akhir hadapan rangkaian atau sempadan. Trafik rangkaian melalui perkakasan depan sebelum memasuki rangkaian.

Dalam sistem pengurusan kandungan, terma bahagian depan dan akhir belakang boleh merujuk kepada pengguna akhir menghadapi pemandangan CMS dan pandangan pentadbiran masing-masing.

Dalam penyusun, bahagian hadapan menterjemahkan kod sumber pengaturcaraan komputer ke dalam perwakilan pertengahan, dan akhir kembali bekerja dengan perwakilan perantaraan untuk menghasilkan kod dalam bahasa output komputer. Hujung belakang biasanya mengoptimumkan untuk menghasilkan kod yang berjalan lebih cepat. Perbezaan di bahagian depan / belakang boleh memisahkan bahagian penghurai yang berurusan dengan kod sumber dan hujung belakang yang menjana kod dan mengoptimumkan. Sesetengah reka bentuk, seperti GCC, pilihan tawaran antara berbilang hujung depan (menghuraikan bahasa sumber yang berbeza) atau hujung belakang (menjana kod untuk pemproses sasaran yang berbeza).

Dalam sintesis pertuturan, bahagian hadapan merujuk kepada sebahagian daripada sistem sintesis yang menukarkan teks input ke dalam perwakilan fonetik simbolik, dan akhirnya kembali menukarkan perwakilan fonetik simbolik ke dalam bunyi yang sebenar.

Dalam konteks aplikasi WWW, orang tengah adalah perkhidmatan yang berfungsi serentak sebagai pelayan di hujung depan dan sebagai pelanggan di hujung belakang. 

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