peserta antusias mengikuti kegiatan yang diadakan HMJ TI
Workshop Web Standards Web Design
Kontribusi
Rp. 50.000,-
Pembicara
Herman Saksono ( Web Designer )
Waktu kegiatan
Mingg, 05 Juli 2009. Pukul 09:00 - 15:00 WIB
Lokasi
Lab Terpadu Ruang Basis Data STMIK AKAKOM Yogyakarta

Overview

Informasi adalah RAJA. Andaikan anda sedang membuka sebuah website, dan website yang sedang kita buka itu sangat lambaaat untuk dibuka, dan bahkan saat dibuka hanya menampilkan gambar-gambar desain layout yang tidak penting. Lalu, anda lelah menunggu karena informasi - informasi yang kita tunggu tak kunjung muncul. Atau, mungkin anda pernah membuka sebuah website melalui handphone canggih anda yang sudah mempunyai fitur GPRS dengan layar yg tentunya tidak sebesar layar monitor atau laptop.

Sekali lagi Anda mencoba untuk membuka sebuah website melalui handphone anda. Pulsa pas2an dan loadingnya lambat pula. Lagi - lagi anda menunggu informasi yang anda inginkan, tapi sayangnya.. lagi-lagi pada layar handphone anda hanya baru muncul gambar-gambar dari desain layout yang tidak penting itu. Anda tentunya akan menutup website itu secepatnya. Anda sudah rugi bandwidth yang memakan pulsa anda, lalu mungkin anda ngedumel kesal dengan website itu. Tenang... tidak hanya anda yang rugi, perlu anda ketahui pemilik website yang anda buka websitenya itupun juga rugi besar. Mungkin saja saat itu anda sedang membuka website penjualan velg mobil idaman anda. Jika saja pemilik website itu mau menerapkan web standards, dia tidak akan kehilangan anda sebagai calon pembeli. Tragis memang.

Lalu, apa itu Web Standards ?

Web Standards adalah sekumpulan rekomendasi - rekomendasi atau peraturan - peraturan dalam membangun sebuah website. Rekomendasi - rekomendasi ini dibuat oleh World Wide Web Consortium ( W3C ) W3C adalah sebuah organisasi internasional yang mengelola standar - standar dokumen elektronik. Seperti halnya The Internet Engineering Task Force sebuah organisasi internasional yang mengurus masalah standar - standar hardware jaringan yang sering kita pakai dalam dunia jaringan komputer.

Web Standards memiliki konsep dan model yang dikenal dengan tiga lapisan utama website yaitu

  • (X)HTML sebagai lapisan data / content
  • Cascading Style Sheet ( CSS ) sebagai lapisan presentasi / gaya
  • Javascript sebagai lapisan interaksi dinamis

Yang dicari pengunjung ke website kita adalah content / data / isi informasinya. Maka dari itu kita harus ahli dalam memilih tag HTML yang benar untuk merepresentasikan data / content dalam proses penyusunan dokumen atau sisi data website kita. Hmm..bukankah tampilan juga faktor yang penting? Yap! benar sekali, kita tidak boleh mengesampingkan desain / tampilan. Oleh karena itu CSS digunakan untuk menggayakan dokumen website kita, dimana CSS sebagai lapisan presentasi/gaya dalam website kita.

Lalu, mengapa dipisah - pisah sebagai lapisan - lapisan? . Pernahkah anda saat mendesain sebuah website menggunakan photoshop, lalu setelah desainnya jadi anda gunakan sebuah tool yg bernama 'slice tool'. Lalu mulailah anda potong-potong desain anda setelah itu anda 'save as for web'. Dan data sudah dimasukkan. Jreeeeng..jadi dehh sebuah website. Tapi dikemudian hari anda ingin mengubah desainnya, mungkin anda sedang mendapatkan sebuah inspirasi dan konsep baru dalam desain grafis. Apa yang terjadi? anda akan menghabiskan waktu anda yang sangat berharga dengan susah payah menyusun ulang content / data website anda. Dengan menerapkan web standards, lapisan data anda tidak akan terganggu atau ternodai dengan lapisan gaya.

Silahkan kunjungi CSS Zen Garden untuk melihat langsung buktinya, jika kita bisa ber-expresi sebebas bebasnya dengan struktur data yang sama. Silahkan 'view source' dari website tersebut untuk melihat struktur datanya. Dengan cara Klik View -> Page Source pada Browser Mozilla Firefox atau Klik -> Source pada browser Opera. Dan anda juga bisa menghilangkan lapisan gaya website CSS Zen Garden dengan cara klik View -> Page Style -> No Style atau View -> Style -> User mode. Anda akan melihat struktur data yg sama, tetapi dengan desain yg berbeda-beda. Enjoy!

Show me the money! kira2 duitnya sebelah mananya nih?

Keuntungan - keuntungan apa saja yang bisa anda dapatkan dari penerapan web standards untuk bisnis anda berbasis website? Banyaaak sekali! diantaranya

  • Proses development yang lebih sederhana dan manageable ( mudah dimanajemen )
  • Penggunaan tag HTML yang tepat, menjadikan file dokumen HTML kita menjadi semakin ramping. Yang hasilnya adalah website lebih cepat diload, dan irit bandwidth. metode pembuatan website yg lama ( slicing di photoshop lalu diexport as web ) menghasilkan kode2 HTML yg sembarangan dan ukuran file menjadi sangat besar dan tidak meaningfull
  • Pengunjung / customer anda akan melihat website anda dirender / ditampilkan lebih cepat karena ukuran file dokumen yang kecil
  • Semantic HTML, dimana struktur data / isi informasi website dipisahkan dari lapisan gaya / presentasi. Membuat website kita lebih mudah diakses di berbagai perangkat dan perangkat-perangkat tersebut lebih mudah dalam mengartikan content kita.
  • Meningkat ranking pada search engine
  • Style switch. Dengan struktur data yang sama, berbagai gaya / desain dapat diterapkan.

Jadi, tidak usah ragu lagi untuk mengajukan proposal ke sebuah perusahaan yang walaupun sudah website. Anda tawarkan solusi website yang ramah, ringan, dan irit bandwidth. See the money?

Pembahasan

Overview

  1. Mengapa Web Standards
  2. Keuntungan - keuntungan
  3. Demo : 1. Website - website yg menerapkan web standards, 2. CSS Switch, 3. JQuery

Konsep dasar slicing website pada web standards

  1. Pengenalan ulang tag - tag HTML
  2. Pemilihan tag untuk content yang meaningfull
  3. Teknik Slicing
  4. Pengenalan CSS Layout

Lalu, dilanjutkan dengan praktek menyusun website dari awal. Menyusun website dua kolom dengan komponen - komponen dasarnya yaitu header, menubar, content kiri dan kanan.

Kesimpulan

Melalu workshop ini, peserta dapat membuat website dengan teknologi XHTML dan CSS. Memahami pentingnya sebuah struktur dan meaning sebuah content. Website jaman sekarang sudah tidak seperti dulu lagi, banyak hal yang harus diperhatikan. Mulai dari target pengunjung, perangkat, dan browser. GO WEB STANDARDS!