Chapter 1: Introduction to the web

Ini adalah materi pertama pelatihan modern web design, chapter 1: welcome to the web.

Course introduction

Pada pelatihan ini peserta akan dibimbing untuk membuat tampilan website yang atraktif, interaktif, dan dinamis dengan menggunakan HTML, CSS, dan Javascript (jQuery). Metode yang akan digunakan adalah pemahaman materi yang kemudian diaplikasikan pada sebuah contoh kasus. Peserta akan dibimbing untuk membuat beberapa contoh desain halaman web yang umum ditemui akhir-akhir ini. Selain itu, peserta akan diberikan informasi terkini yang berkaitan dengan desain web.

Peserta diajarkan untuk mendesain website dengan menggunakan tool sederhana berupa text editor seperti Notepad++/Intype (windows) atau Textmate/Coda (mac).Penggunaan text editor dimaksudkan agar menghasilkan kode yang bersih, memiliki performa tinggi, dan agar peserta memahami materi dasar dengan baik.

Sebelum kita mulai mempelajari hal teknis untuk membangun sebuah web, sebaiknya kita mencoba memahami terlebih dahulu bagaimana internet bekerja. Pada chapter ini saya akan menjelaskan bagaimana cara internet bekerja, dan apa yang harus kita lakukan untuk dapat mendesain sebuah website dengan baik.

Bagaimana internet bekerja? Sederhananya, ada 2 pihak yang terlibat ketika kita terhubung ke internet, yaitu kita (client), dan server. Pertama-tama client membuka browser, lalu mengetikkan alamat website (url) yang ingin dituju. Permintaan ini (request) akan disampaikan kepada alamat server yang bersangkutan, lalu server akan mengirimkan data (response) kepada client. Data yang dikirimkan ini kemudian diterjemahkan oleh browser sebagai gambar, musik, video, teks, dll. 

Silakan lihat video ini agar lebih jelas. 

Cukup sederhana kan? Dari penjelasan tersebut, kita dapat membagi proses pengembangan website dari 2 sisi: yaitu pengembangan dari sisi client (front-end) atau dari sisi server (back-end). Sisi server dilakukan oleh web programmer dengan menggunakan bahasa pemrograman server-side (misal: PHP, ASP, Ruby, ColdFusion, dll) dan juga mengurus masalah seputar interaksi dengan database (misal: MySQL, Oracle, Mongo, dll). 

Sisi client dilakukan oleh seorang web designer, yang bertanggung jawab untuk memberikan tampilan (user interface / UI) kepada pengguna. Teknologi yang digunakan untuk membuat UI website ini adalah HTML, CSS, Javascript, yang kemudian diinterpretasi oleh browser. Disinilah posisi kita sekarang. 

Sebelum memahami bagaimana cara mengembangkan website dari sisi client, kita perlu memahami bagaimana cara browser bekerja. Mari kita lihat video ini:

Dari video tersebut terlihat bahwa browser berfungsi untuk menerjemahkan data yang dikirim oleh server. Data tersebut dapat berbentuk HTML, CSS, Javascript, video, gambar, audio, teks, dll. Pada dasarnya, ada 3 hal yang perlu dipelajari untuk mendesain web, yaitu HTML, CSS, dan Javascript. 

HTML (singkatan dari HyperText Markup Language), adalah sebuah bahasa yang digunakan untuk menentukan struktur/konten dari sebuah halaman website. HTML berperan sebagai tulang punggung pembangunan struktur website. Isi dari sebuah website ditentukan oleh elemen HTML. 

Sebuah dokumen HTML biasanya dimulai oleh tag <html> dan diakhiri oleh tanda </html>. Coba perhatikan elemen pada dokumen HTML, semuanya dibuka oleh tag seperti <namatag> dan diakhiri oleh tag </namatag>. Biasanya, sebuah file HTML memiliki ekstensi .htm atau .html. Pada chapter 2 kita akan membahas lebih detail mengenai HTML.

CSS (singkatan dari Cascading Style Sheet) adalah sebuah bahasa yang digunakan untuk memberikan style pada sebuah dokumen HTML. Pemisahan antara struktur dengan style ini bertujuan untuk memberikan keleluasaan bagi web designer untuk mengupdate tampilan web dengan mudah. Kita akan berkenalan dengan CSS secara lebih mendalam pada chapter 2.

Javascript adalah sebuah scripting language (semacam bahasa pemrograman) yang berguna untuk memanipulasi tampilan halaman website secara dinamis. Dalam web design, javascript dieksekusi di sisi browser, sehingga kita dapat memanipulasi kelakuan (behavior) dari halaman HTML. Javascript akan kita bahas lebih mendalam pada chapter 6.

Singkatnya, pengembangan web design sebaiknya mengikuti best practice yang umum digunakan, yaitu dengan memakai HTML untuk struktur & konten, CSS untuk menentukan style / presentation, dan Javascript untuk mengatur behavior (kelakuan) dari desain tersebut.

Designing for the web.

Proses mendesain website tentu saja berbeda dengan proses mendesain pada print. Biasanya desainer yang baru pertamakali bekerja pada website akan menemui kesulitan

  1. Print vs screen. Proses mendesain website dilakukan pada media berupa layar (screen). Mendesain pada screen tentu saja berbeda dengan mendesain dengan media yang di print. Pada screen, apa yang dilihat oleh pengguna sangat tergantung pada ukuran dan resolusi dari screen. Sebuah website yang terlihat cantik pada layar laptop belum tentu sama bagus dengan layar iPhone. Biasanya seorang graphic desainer yang telah terbiasa mendesain untuk media print akan merasa sedikit kesulitan untuk mendesain pada screen. Mereka terbiasa menggunakan satuan point (pt), padahal sebuah screen terdiri dari pixel (px). Perbedaan-perbedaan mendasar seperti ini harus mampu dipecahkan oleh seorang web designer.
  2. Browser consistency. Selain itu, ada satu permasalahan yang sangat sangat sangat sering ditemui oleh web designer yang baru mulai belajar web desain, yaitu perbedaan tampilan pada berbagai browser. Website yang terlihat bagus di Firefox belum tentu akan sama baiknya ketika dilihat di Internet Explorer. Perbedaan tampilan ini terjadi karena perbedaan rendering engine, dan javascript engine pada setiap browser. Untuk dapat menghasilkan desain yang konsisten di setiap browser, kita perlu mengikuti standar yang telah ditetapkan oleh World Wide Web Consortium (W3C), yaitu sebuah lembaga yang bertindak untuk menetapkan standar dalam pembangunan website.
  3. Speed  & Bandwidth. Proses desain website tentu saja tidak terlepas dari kecepatan untuk membuka sebuah website. Website yang baik tentu saja harus dapat diakses dalam waktu yang cepat. Idealnya, sebuah website tidak berukuran lebih dari 100KB, agar dapat di-load dalam waktu kurang dari 6 detik. Seorang web designer yang handal harus dapat memperhitungkan faktor ini, karena mempengaruhi experience pengguna. Semakin kecil ukuran sebuah website, semakin cepat web tersebut di-load.

I think that’s it for now, saya mau ngampus dulu…

Masih banyak materi yang akan saya bahas, jadi silakan ikuti pelatihannya ya…

More resources:

  1. Nettuts -> tempat belajar segala sesuatu yang bekaitan dengan web design & development
  2. w3school -> referensi lengkap mengenai dasar-dasar html, css, dan javascript
  3. Csszengarden -> contoh-contoh website yang memiliki markup HTML yang sama, tetapi berbeda CSSnya. Perbedaan CSS tersebut memberikan hasil yang jauh berbeda antara satu dengan yang lain
  4. Thinkvitamin -> Blog tentang web design & development. Mereka menawarkan video ttg web design juga.
  5. How 2 spot quality within web design -> bacaan bagus

4 Notes/ Hide

  1. aenyandeleeb reblogged this from wari
  2. ilmaismail said: can’t wait for the next chapter, thx anyway :D
  3. wari posted this

Recent comments

Blog comments powered by Disqus