Belajar Tata letak dan Layout Desain Web dari nol


Desain blog/web
sendiri merupak tantangan yang harus dihadapi oleh setiap vloger terutama bagi kaum pemula, yang pusing tujuh keliling yang harus dihadapkan dengan CSS, PHP, JAVASCRIPT. Tapi tenang saja disini kita akan membahas bersama-sama mengenai pengenalan sampai penerapan.

Apa Fungsi Desain Web..? 
Desain web tentu memiliki fungsi-fungsi yang mendasari pengembangannya. Fungsi-fungsi ini lah yang mendasari tampilan dari suatu web agar dapat melayani dan memberikan konten-konten yang diinginkan oleh pengunjung website karena kembali ke awal lagi, desain web adalah seni grafis yang ditujukan untuk memudahkan pengunjung menggunakan fungsional web. Fungsi-fungsi dari desain web diantaranya.

Apa Tujuan Desain Web..? 

Tujuan dari desain web adalah sebagai dokumen elektronik dalam penyampaian informasi kepada pengunjung ataupun konsumen dengan tampilan yang interaktif dalam bentuk web. Desain web juga berperan dalam penyampaian informasi kepada pengunjung atau konsumen agar mudah dipahami sehingga pengunjung merasa seperti melihat penjelasan dari seorang pelayan, bukan sebuah halaman web.

A. Pengenalan Dasar Desain 
    1. HTML
Apa itu HTML..? Html Singkatan dari Hypertext Markup language merupakan Dasar Standar yang digunakan untuk membuat sebuah web. Yang nantinya akan menampilkan berbagai informasi di dalam penjelajah internet yaitu Browser (contohnya : Firefox,Chrome, Safari dll ). 
Apa fungsi dari HTML..? 
fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.
Baca juga : Cara membuat website di Notepad bagi pemula.
bagaimana Bentuk HTML..?
Inilah bentuk dan struktur dasar dari HTML. 

See the Pen xxZYaPb by Asep Surya S (@asep-surya-s) on CodePen.

Gambar di atas merupakan bentuk dasar dari HTML, anda juga bisa uji coba dan ketik code dasar di atas menggunakan alat atau aplikasi seperti NOTEPAD , NOTEPAD ++ , SUBLIME TEXT Dan editor lainnya.

Note : dimana ada pembuka pasti ada penutup, seperti gambar di atas, pembukanya <html> di tutup dengan </html> dan berlaku juga untuk seluruh code.

2.CSS
CSS singkatan dari Cascanding style Sheet yang fungsinya untuk mengatur tampilan Element pada blog kamu.  

Bagaimana bentuk CSS. ?
Bentuk CSS di antaranya sebagai berikut tinggal anda pindah ke Tab CSS :

See the Pen Mengenal CSS by Asep Surya S (@asep-surya-s) on CodePen.

Baca juga : cara menggabungkan CSS Dan HTMl
Gambar di atas merupakan bentuk dari CSS. Disini contohkan CSS ini mengatur element (p) atau Paragraph Ketika kalian memanggil kode <p class ='a'>.... </p> di html maka akan otomatis tampilan text tersebut menjadi berubah menjadi font "Times New Roman", Times, serif .

3. Java Scipt
JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT


Apa fungsi dari Java Script..?

Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan baik, tetapi juga sangat elegan dan indah.

Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fungsi, maka perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (information hiding). Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terhadap pemrograman berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari sebuah objek.

Ada 3 macam cara penulisan tag javascript, yaitu;

  1. Menuliskan Tag dengan diawali <script type=”text/javascript” > dan diakhir dengan </script> atribut yang menginformasikan kepada browser bahwa program script yang ada dalam tag tersebut adalah javascript dalam format text.
  2. Menuliskan Tag dengan diawali <script language=”javascript” > dan diakhir dengan </script> atribut ini digunakan dengan tujuan untuk menentukan versi dari javascript yang digunakan, sebagai contoh <script language=”javascript1.2”> menyatakan bahwa javascript yang kita gunakan adalah versi 2.1.
  3. Menuliskan Tag dengan diawali <script language=”javascript” type=”text/javascript” > dan diakhir dengan </script> cara campuran ini yaitu penulisan lama dan penulisan baru disatukan, dilakukan untuk mengantisipasi pengakses halaman web yang masih menggunakan browser web yang mendukung javascript, tetapi belum mendukung HTML.

Dengan adanya javascript, maka teknik penulisan HTML dapat dilakukan dengan dua cara, yaitu dengan membuat program javascript untuk menghasilkan dokumen HTML atau dengan membuat dokumen HTML seperti biasa, kemudian jika ada program javascript, maka kita menambahkan program javascript tersebut sebagai sisipan saja.

B. Pengenalan Layout

Layout atau dalam bahasa Indonesia dikenal dengan tata letak adalah pengaturan tulisan-tulisan dan gambar-gambar. Kemudian bagaimanakah layout yang baik itu?? Atau bilamanakah sebuah layout dikatakan baik? Sampai saat ini belum ada jawaban yang sangat tepat tetapi ada beberapa kriteria yang dapat digunakan.

Ada tiga kriteria dasar untuk sebuah layout yang dikatakan baik, yaitu : It Works (mencapai tujuannya), It Organizes (ditata dengan baik) dan It Attracts (menarik bagi pengguna).

Sebuah layout dapat bekerja dan mencapai tujuannya bila pesan-pesan yang akan disampaikan dapat segera ditangkap dan dipahamin oleh pengguna dengan suatu cara tertentu. Selanjutnya, sebuah layout harus ditata dan dipetakan secara baik supaya pengguna dapat berpindah dari satu bagian ke bagian yang lain dengan mudah dan cepat. Akhirnya, sebuah layout harus menarik untuk mendapatkan perhatian yang cukup dari penggunanya.

Tip:

  • Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca.
  • Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang penting.
  • Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main post di sebelah kiri sedangkan sidebar di sebelah kanan.
  • Perhatikan pula keseimbangan susunan elemen desain.

Mengenal Menu Tata Letak (Layout) pada Dashboard Blog

1. Tentang menu Layout pada dashboard blog

Pada menu layout, kita bisa melakukan beberapa penyesuaian terkait struktur / elemen-elemen yang terdapat pada blog. Disini, anda bisa melakukan beberapa hal berkaitan dengan widget blog seperti menghapus widget, menambahkan widget serta mengubah posisi widget ke bagian tertentu.


Pada gambar diatas, terlihat struktur theme (Tema) yang sedang digunakan pada blog. Ini adalah struktur untuk theme bawaan blogger yang sedang digunakan pada blog khusus latihan ini. Dilihat dari sisi penempatan, struktur theme bawaan ini bisa dikatakan masih berantakan. Dengan kata lain, susunan yang terdapat pada antarmuka layout ini tidak menggambarkan struktur tampilan blog yang sebenarnya. Untuk sekarang, struktur ini bisa kita abaikan dulu. Kita akan mulai membahas tentang bagaimana cara menambahkan, menghapus serta mengubah posisi widget melalui antarmuka layout ini.

2. Cara menambah dan Menghapus widget

Ada banyak widget yang bisa anda tambahkan pada blog. Pada contoh ini, saya akan menambahkan widget Popular posts (Postingan Populer) pada bagian Sidebar (bottom). Caranya, Klik pada link "Add a Gadget" yang terdapat pada bagian Sidebar (bottom). Ini akan membuka jendela baru pada browser. Akan muncul banyak pilihan widget, Contohnya saya pilih Popular Posts dan Atur sesuai settingan yang diperlukan


dan Untuk menghapus Widget Sebagai Berikut :


Untuk menghapus widget tertentu, klik pada (Edit). Akan terbuka jendela konfigurasi widget, klik Hapus.

Avatar

Apakah bisa jika widget dipindahkan ke bagian lain, misalnya dari Sidebar ke Footer ?

11:00
Avatar

Bisa ..! Asalkan bagian tersebut memang memungkinkan untuk dipasang banyak widget. Pada kasus tertentu, terkadang developer theme (pembuat tema blogger) memberikan nilai maksimal pemasangan widget untuk bagian-bagian tertentu. Contoh kasus disini adalah bagian header dan Search (top) yang hanya memungkinkan untuk dipasang satu widget saja. Lebih jauh tentang ini akan anda temui nanti, tidak pada halaman dan tingkatan ini ^_^.

11:01
Avatar   

Apakah semua widget bisa dipindahkan dengan cara Drag and Drop ?

11:02
Avatar

Tidak semua..! terkadang ada widget tertentu yang di-lock (dikunci) oleh developer. Dalam theme ini, contoh widget yang di-lock adalah Report Abuse, dan Header. Untuk mengatur posisi widget yang di-lock, kita harus melakukannya melalui edit HTML theme. Lebih lengkap tentang ini juga tidak akan saya bahas pada halaman ini ^_^.

11:05

Posting Komentar

0 Komentar

Close Menu