pertemuan 3

Merancang dan Membangun Website

7 aturan merancang website

1.  Just becouse you can doesn’t mean you should.  Adanya  teknologi,  bukan  berarti  harus  digunakan  ketika merancang  website.  Sering  kali  teknologi  malah menghalangi  performa  dari  website  atau  mengganggu pengguna  sehingga  meninggalkan  website.  Ketika menggunakan  teknologi,  perancang  harus  bertanya “Apakah  teknologi  mampu  menambah  nilai  sebuah website atau ditambahkan sebagai hal yang baru?
2. There is almost always an exception Perancang  web  harus  hati-hati  ketika  mengesampingkan  penggunaan  teknologi  atau  metode design  yang  sederhana  karena  tidak  bekerja  di  website lain.
3. Users are the ultimate judges Pendapat/opini tidak pernah berhenti ketika berada pada proses perancangan/design.
4. Crossover experience is something a designer needs to always strive for Seorang  perancang  web  profesional  mengerti  akan kebutuhan  dari  user,  tanpa  memperhatikan  bahwa perancang  secara  pribadi  percaya  estetika  dan  aspek-aspek tehnik dari website harus dirancang. 
5.  Humility is the best approach Karena  ada  begitu  banyak  seluk-beluk Desain  Web,  dibutuhkan  desainer  dengan  situs  yang lebih  menarik,  teknologi  baru,  atau  penggunaan teknologi dengan cara yang lebih kreatif. 
6.  It is impossible to please everyone Seorang  desainer  seringkali  harus  mengambil  sikap untuk  mempertahankan  fungsional  tertentu  dan  aspek estetika  desain,  tidak  pernah  bertujuan  untuk  membuat semua  pengguna  puas  karena  semua  orang  punya pendapat. 
7. Try to stay on top of specifications and standards Spesifikasi  dan  standar  web  akan  terus  berubah. Perancang  web  harus  memiliki  pemahaman  dasar tentang  teknik-teknik  terbaru,  yang  akan  mempengaruhi hasil kerja dimasa yang akan datang.

3 Filosofi Merancang Web

1.  Estetika  Bagaimana  profesional  tampilan  dan  nuansa  situs  ini? Apakah  konsisten  dengan  yang  diinginkan  branding bisnis atau individu? 
2.  Kegunaan Seberapa  cepat  dan  mudah  pengguna  mampu menemukan  dan  memproses  informasi   ketika  sedang melakukan tugas-tugas yang diperlukan? 
3.  Fungsi  Pemrograman  harus  mengaktifkan  aspek  fungsional situs, seperti formulir dan konten database-driven. Desain web dibagi 3, yaitu:

a.       Desain Antar Muka

b.      Desain Situs

c.       Desain Halaman

Desain Web

1.   Look and feel requirements. Termasuk  penempatan  konten,  bagaimana  situs menyampaikan pesan perusahaan, palet warna, dan font serta gambar konsep-konsep yang akan disajikan.

2.  Bandwidth requirements. Cara situs dirancang menentukan bagaimana besar dari bandwidth  yang  diperlukan  oleh  sebuah  situs.  Dengan memahami  bandwidth  (download  size),  desainer  dapat menentukan  keseimbangan  antara  grafis  dan  teks  yang akan digunakan.

Requirement

Ketika  membangun  sebuah  situs,  beberapa  informasi  yang paling penting bagi seorang desainer  meliputi:

1.    Resolution requirements . Sebuah  situs  dengan  resolusi  yang  tidak  benar  dapat menghambat kegunaan atau kredibilitas.

2.    Scalability requirements. Hampir  semua  situs  berada  dalam  evolusi  yang  tetap, penting  bagi  desainer  untuk  empertimbangkan  bagaimana situs bisa expanded atau berubah di masa depan.

3.   Content requirements. Volume  isi  situs  akan  mempengaruhi  hampir semua  persyaratan  lain,  termasuk  tampilan  dan  nuansa, bandwidth, resolusi dan skalabilitas.

4.         Tata  letak  yang  baik  penting  untuk  penyajian  gambar profesional dan kegunaan dari sebuah situs. 

5.    Pengguna  harus  dapat  menemukan  informasi  dengan mudah  lengkap,  hal  inilah  yang      mempengaruhi  tata letak/layout. 

6.          Layout  dalam  sebuah  web  lebih  mengacu  pada  posisi elemen, daripada tampilan dan nuansa situs.

Keuntungan Scrolling

•           Desain  bisa  muat  lebih  banyak  konten  pada  satu halaman. 

•     Pengguna tidak harus klik dan menunggu untuk me-load halaman  lain,  yang  tidak  hanya  butuh waktu,namun pengguna  juga  harus  kembali   matanya  terfokus  pada daerah  baru  yang  sebagian  besar  kemungkinan  pada atau di dekat bagian atas layar.

•         Sangat  mudah  untuk  navigasi  cepat  jika  pengguna menggunakan  mouse  dengan  roda  atau         scroller  stylus danmemungkinkan  untuk  menggerakan  kursor  dengan mudah.

Kerugian Scrolling

•           Dibutuhkan  sedikit  usaha  untuk  mengklik  link  yang membuka halaman baru.

•           Karena  halaman  digulir  lebih  panjang,  waktu  download mereka biasanya lebih besar. Posisi Content

•         Posisi menu Sejak  pertengahan  1990-an,  desainer  telah  bereksperimen dengan  menempatkan  menu pada  kiri,  kanan,  atas,  tengah, atau  bawah  halaman,  dmana  saja  yang  bisa  bayangkan menu  telah  ditempatkan  di  sana.  Selama  bertahun-tahun, menempatkan  menu  ke  kiri  atau  di  bagian  atas  halaman telah menjadi standar yang lebih tradisional.

•    Hirarki  Struktur  hirarki  merupakan  suatu  struktur  yang mengandalkan  percabangan  untuk menampilkan  data berdasarkan  kriteria  tertentu.   Tampilan  pada  menu pertama  akan  disebut  sebagai  master  page,  halaman utama  ke  satu.   Halaman  utama  ini  akan  mempunyai halaman  percabangan  yang  dikatakan  slave  page, halaman  pendukung.   Jika  salah  satu  halaman pendukung  diaktifkan,  maka  tampilan  tersebut  akan bernama  master  page,  halaman  utama  kedua.   Pada struktur  navigasi  ini  tidak  diperkenankan  adanya tampilan secara linier.

•           Non Linier Pada struktur nonlinier diperkenankan membuat struktur navigasi  bercabang,  percabangan  ini  berbeda  dengan percabangan  pada  struktur  hirarki.   Pada  percabangan nonlinier  walaupun  terdapat  banyak  percabangan  tetapi tiap-tiap  tampilan  mempunyai  kedudukan  yang  sama tidak ada pada master page dan salve page.

•        Campuran Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya.  Struktur navigasi ini banyak digunakan dalam pembuatan aplikasi multimedia sebab dapat memberikan keinteraksian yang lebih tinggi.

Teknik Typografy

•           Tipografi  (typography)  adalah  ilmu  yang  mempelajari tentang huruf.

•           Tipografi  lebih  dari  seni  memilih  font,  tentang  membuat konten lebih mudah dibaca. 

•   Teks  merupakan  bagian  sentral  dari  antarmuka pengguna,  sehingga  kebutuhan  User  Interfacedipengaruhi pemilihan font, ukuran, dan spasi. 

Anatomi Huruf

•           Semua karakter dari huruf ada pada baseline.

•           Tinggi  huruf  kecil  x  secara  tradisional  digunakan  untuk menentukan baris untuk font. 

•           Jarak  antara  garis  rata-rata  dan  baseline  disebut sebagai tinggi-x dari font. Bagian dari Font

Huruf dikelompokan menjadi 2 jenis, yaitu :

1.       huruf besar (upper case atau capital letter)

2.       huruf kecil (lower case).

Huruf dikelompokan menjadi 3 yaitu :

1.       huruf berkait (serif)

2.       huruf tak berkait (sansserif)

3.       huruf latin (script)

Ditinjau dari sudut geometri, garis dasar yang mendominasi struktur huruf dibagi dalam 4 kelompok besar:

1.       Kelompok garis tegak datar (E, F, H, I, L)

2.       Kelompok garis tegak miring (A, K, M, N, V, Z, X, Y, W)

3.       Kelompok garis tegak lengkung (B, D, G, J, P, R, U)

4.       Kelompok garis lengkung (C, O, Q, S)

5.       Ditinjau dari hukum teori Gestalt, huruf memiliki 2 ruang dasar, yaitu figure dan ground.

 Ruang  negatif  dari  seluruh  huruf  dapat  dikelompokan menjadi 3, yaitu:

1.       Ruang  negatif  bersudut  lengkung  (B,  C,  D,  t,  G,  O,  P, Q, R, S, U)

2.       Ruang negatif bersudut persegi empat (E, F, H, I, L, T)

3.       Ruang  nefatif  bersudut  persegi  tiga  (A,  K,  M,  N,  V,  W, X, Y, Z)

Huruf Tak Berkait (Sans Serif)

•         Bentuk  huruf  yang  tidak  memiliki  kait,  bertangkai  tebal, sederhana  dan  lebih  mudah  dibaca,    tidak  memiliki stroke/ekor,  ujungnya  bisa  berbentuk  tumpul  (rounded corner) atau tajam.

•           Sifat huruf kurang formal, lebih hangat dan bersahabat.

•           Sangat cocok untuk screen-font (tampilan layar monitor) karena tajam dan mudah dibaca.

•           Bentuk huruf yang popular adalah Helvetica dan Arial.

•           Bentuk huruf yang memiliki kait, dengan ketebalan yang kontras, memiliki stroke.

•           Merupakan huruf yang formal. Serif  mengekpresikan  organisasi  dan  intelektualitas, sangat anggun dan konservatif. Contoh paling umum adalah Times. Huruf Berkait (Serif)

•        Merupakan  dasar  dari  bentuk  huruf  yang  ditulis  dengan tangan,  kontras  tebal  dan  tipisnya     sedikit,  salir berhubungan dan mengalir.

•           Menyerupai  tulisan  tangan,  sering  disebut  kursif (cursive)

•           Memberikan  kesan  keanggunan,  sophistication  dan sentuhan pribadi.

•           Pemakaiannya jangan sampai terlalu banyak.

Huruf Tulis/Latin (Script)

AaBb

•           Sangat rumit desainnya, akan memusingkan jika dipakai sebagai  body  text  dan  hanya  cocok  dipakai untuk headline.

•            Dapat membuat efek responds yang berbeda.

•     Paling cocok digunakan untuk judul, dan lebih baik tidak digunakan sebagai body text/body copy. Dekoratif (Decorative)

•            Mempunyai jarak/lebar yang sama setiap hurufnya.

•            Banyak  digunakan  oleh  programmer  untuk  coding  dan juga untuk preformatted text.

•            Belakangan banyak dipakai oleh desainer yang beraliran grunge alternatif.

DETIL EDITING: TEKNIS

11. Mencari  kesalahan-kesalahan  faktual  dan  memperbaikinya, di  antaranya  kekeliruan  salah  tulis  tentang  nama,  jabatan, gelar,  tanggal  peristiwa,  nama  tempat,  alamat,  dan sebagainya.

22.  Memperbaiki  kesalahan  dalam  penggunaan  tanda-tanda baca.

33. Tegas  dalam  hal-hal  seperti  penggunaan  huruf  besar  dan singkatan,  penggunaan  gelar,  tanda  baca,  ejaan,  tata bahasa, pemilihan jenis huruf untuk judul, dsb.

44. Mengetatkan tulisan atau menyingkat tulisan sesuai dengan ruang  yang  tersedia,  termasuk  membuang  atau  memotong (cutting) paragraf yang tidak penting.

55.  Mengganti  kata  atau  istilah  yang  tidak  memenuhi prinsip ekonomi kata.

66.  Melengkapi  tulisan  dengan  bahan-bahan  tipografi, seperti anak judul (subjudul), di mana diperlukan.

77.  Menulis  atau  menentukan  judul  dan  lead  atau  teras berita jika dipandang perlu.

88. Di beberapa suratkabar, editing juga termasuk menulis caption  (keterangan  gambar)  untuk  foto  dan  pekerjaan lain yang berhubungan dengan cerita yang disunting itu.

DETIL EDITING: NON-TEKNIS

11. Memperhatikan  apakah  naskah  berita  sudah  memenuhi nilai-nilai jurnalistik dan kriteria layak muat—aktual, faktual, penting, dan menarik.

22. Meneliti  apakah  naskah  berita  sudah  menaati  doktrin kejujuran  (fairness  doctrine)  serta  asas  keberimbangan (cover  both  side).  Jika  belum,  tugaskan  kembali  reporter untuk memenuhinya.

33. Memperhatikan  apakah  opini,  interpretasi,  atau  penilaian wartawan lebih menonjol daripada fakta hasil liputan.

44. Menjaga  jangan  sampai  terjadi  kontradiksi  dalam  sebuah naskah.

55. Menjaga jangan sampai terjadi penghinaan, arti ganda, dan tulisan yang memuakkan (bad taste).

66. Sadar  mengenai  sifat-sifat  umum  tentang  umur,  taraf hidup,  dan  gaya  hidup  para  pembaca  utama  korannya, dan  menyunting  naskah  sesuai  dengan  sifat  umum tersebut.

77 Memperbaiki tulisan opini (artikel) dengan segala upaya tanpa  merusak  cara  penulisnya  menyatakan pendapatnya.  Karenanya,  redaktur  harus  membaca  lebih dahulu  seluruh  cerita/naskah  untuk  mendapatkan pengertian penuh tentang apa yang berusa dikatakan oleh si penulis.

88.  Menjaga masuknya iklan terselubung sebagai berita.

pertemuan 4

Manajemen Situs Web

Dalam membangun sistus web terdapatat beberapa elemen dari metodologi yang harus diperhatikan yaitu :

1.       Informasi audience

Informasi-informasi ini termasuk latar belakang pengguna, minat, dan semua perincian yang membantu untuk mempertajam informasi untuk dicocokkan dengan kebutuhan audience.

2.      Proposal

Berisi tentang informasi yang jelas tentang alasan dan ruang lingkup dari existensi web. Pernyataan yang Objektif sebuah pernyataan objektif yang berdasarkan pada proposal.

3.      nformasi Domain

Kumpulan pengetahuan dan informasi tentang subjek domain yang ada di cover web, yaitu informasi yang disediakan untuk audience web dan informasi yang dibutuhkan oleh perancang web.

4.      Spesifikasi Web

Adalah gambaran secara rinci dari batasan dan elemen yang akan ditampilkan di web.

5.      TampilanWeb

Adalah informasi yang akan dikirimkan kepada user. Tampilan tersebut adalah hasil dari rancangan dan proses implementasi pembangunan web.

Dalam perancangan situs web terdapat enam proses metodelogi pembuatan yaitu berikut:

1.       Perencanaan

Antisipasi dan memutuskan target untuk audience, tujuan dan sasaran dari informasi. Perencanaan juga dilakukan untuk informasi domain melewati sebuah proses pendefinisian, spesifikasi informasi pendukung yang harus dikumpulkan, bagaimana informasi dikumpulkan dan bagaimana informasi tersebut di up date.

2.       Analisis

Proses mengumpulkan dan membandingkan informasi tentang web dan pengoperasiannya dengan tujuan untuk memperbaiki kualitas web secara keseluruhan.

3.      Perancangan

Sebuah proses yang dilakukan oleh perancang web, mengerjakan spesifikasi web, membuat keputusan tentang bagaimana komponen web diaktualisasikan.

4.      Implementasi

Proses dibangunnya web menggunakan Hyper Text Markup Language (HTML), sehingga proses implementasi mungkin lebih mirip dengan pengembangan software sebab menggunakan syntax yang spesifik untuk pengkodean struktur web dalam sebuah bahasa formasi dalam file komputer.

Implementasu memiliki beberapa teknik, antara lain adalah :

a.       Teknologi Program

·         Web server

Web server berfungsi untuk melakukan service.  Web  server  yang  ada  saat  ini  adalah  Microsoft  IIS (Internet  Information  Service),  Apache,  Microsoft  PWS (Personal Web Server), dan lain-lain. Bahasa  pemrograman  web  browser  dikenal  JavaScript, dan  CSS  yang  dikeluarkan  oleh  W3C  {World  Wide  Web Consortium).  Format  yang  digunakan  sudah  ada  standar  yang  jelas yaitu HTML.

·         Web browser 

Web browser berfungsi untuk memakai/meminta service.  Contoh  dari  Web  Browser  yaitu  Microsofit  IE  (lnternet Explore),  Netscape  Navigator,  Opera,  Magellan,  Mozilla Firefox, dan lain-lain. Bahasa  pemrograman  di  antaranya  PHP,  ASP,  dan lain-lain.

b.      Teknologi Client

Perancangan aplikasi client server harus mempertimbangkan hal-hal sebagai berikut:

1.       Banyaknya client di dalam sistem.

2.       Apakah sistem menggunakan lebih dari satu DBMS.

3.       Kebutuhan update aplikasi di masa mendatang.

Saat ini arsitektur client-server yang banyak digunakan alam industri disebut two-tier architecture. Two-tier architecture pada arsitektur ini, server mengirim data dan client mengakses data. Server memainkan peranan yang dominan pada arsitektur ini. Keuntungan sistem ini adalah kesederhanaan dan kompatibilitas dengan sistem yang legal.

 Kemudian arsitektur client-server yang dikembangkan adalah three-tier architecture, Pada model ini, layer direpresentasikan sebagai host, server dan client. Server memainkan peranan sebagai penengah dengan mengirim aturan bisnis (prosedur atau

constraint) yang digunakan untuk mengakses data dari host.

c.       Teknologi Server

Perkembangan  teknologi  Server  tidak  sepesat perkembangan perangkat komputer lain, mengingat market  server yang terbatas.  Salah  satu  fungsionalitas  dari  server  adalah  sebagai  web server  yang  memungkinkan  server  tersebut  mengelola beberapa  website  dan  melayani  browser  dari  klien  yang  mengakses halaman yang terdapat dalam website tersebut.   Sebuah  web  server  mampu  memberikan  layanan  halaman web, file, gambar, atau data kepada klien yang mengakses.

Web  server  adalah  fungsionalitas  yang  paling  umum  yang diimplementasikan dalam sebuah server. Sebuah  web  server  dapat  mengelola  beberapa  website dan setiap website dapat diakses oleh beberapa klien. Dampak dari sentralisasi informasi ini adalah kebutuhan akan sistem server yang dituntut untuk mampu melayani sebanyak  apapun  klien  yang  mengakses.  Selain  itu sentralisasi  ini  menjadikan  internet  yang  tanpa  batas, diisi  oleh  penyedia  informasi  yang  sifatnya  masih terbatas.

d.      Teknologi Content

Teknologi content yang saat  ini terkenal  dan  banyak  digunakan adalah Content  Management System (CMS).  CMS adalah suatu software yang berguna untuk memanipulasi (menambah,  mengedit  atau  menghapus)  content  atau  isi dari suatu situs web.  CMS  memungkinkan  dilakukan  tanpa  pengguna  harus belajar HTML atau bahasa pemrograman web. Dengan  CMS  update  (perubahan)  isi  situs  dari  mana  saja selama  terhubung  ke  internet  dan  melakukan  update  atau perubahan isi  situs tanpa harus  mengutak-atik layout atau struktur  dari  situs  dan  tool  atau  alat  yang  digunakan hanyalah web browser. 

Sedangkan yang membangun isi atau content adalah author dengan kedudukan yang cukup penting karena suatu intranet tanpa content tidak punyai nilai apa-apa.

Webmaster adalah peranannya dapat dikatakan sebagai komplimen dari seorang manajer jaringan. Tugas-tugas yang banyak ditemui, berkaitan dengan pendaftaran nama domain (domain name), penginstalasian dari Web servers bahkan sampai pada penyiapan konsep dari perjanjian kerja dengan penyedia layanan (service providers), pencatatan prestasi (performance monitoring), dan implementasi dari scripts khusus serta bermacam antar muka (intefaces), termasuk misalnya modul-modul pengamanan, akses pada basis data maupun antar muka e-mail.

Adapun Fungsi pengguna web yaitu :

1.       Administrator

Administrator adalah individu yang bertanggung jawab terhadap proses manajemen dan kebijaksanaan dari isi content) serta untuk membangun halaman-halaman dari perantara jasa (broker pages) ditempat sendiri (on-site) maupun pada direktori ataupun melalui perangkat bantu navigasi dilokasi luarnya (off-site). Termasuk juga dalam tugas ini penetapan pagar-pagar pengaman (fire-walls) serta menyajikan kiat-kiat strategi pengamanan, serta berwenang menindak melalui penyidikan dimana perlu, atas ketidak taatan terhadap kebijaksanaan dan prosedur yang berkaitan dengan isi (content) dari kelompok serta lain-lain, termasuk yang kemunculan tidak secara formal.

2.       Publisher

Isi atau content formal dari Intranet menjadi tanggung jawab dari Publisher.

3.       Editor

Editor bertanggung jawab atas pembentukan dan perawatan content yang terkait dengan lingkup individual dari intranet.

5.       Promosi

Proses mengendalikan semua masalah promosi di web. Termasuk di dalamnya bagaimana web ini dikenal eksis oleh komunitas on line melewati publisitas, sebaik bisnis atau hubungan informasi lain dengan web yang lain.

6.       Inovasi

Proses pengembangan dan perbaikan secara terus menerus.

Content Management System

Content Management System (CMS) adalah denyut nadi sebuah portal atau isi dari portal. Sebuah  portal  yang  baik  akan  selalu  berusaha menampilkan isi terbaru bagi para pengunjungnya.  Isi  dari portal biasanya  terdiri  dari  teks,  gambar,  video,  suara,  dan lain sebagainya.

Dalam  ilmu  komputer  terdapat aturan-aturan untuk menjaga keajegan  proses  pembuatan halaman-halaman  di  portal  secara  efisien  dan  efektif aturan  tersebut  biasa disebut  Sistem Manajemen Isi (SMI).  Dalam bahasa Inggris SMI dikenal dengan sebutan CMS (Content Management System).

SMI  adalah  sebuah  aplikasi  komputer  yang  digunakan untuk mengatur alur kerja yang diperlukan untuk membuat, menyunting,  memeriksa,  indeks,  pencarian,  arsip,  dan menerbitkan  pelbagai  jenis  media  dijital  dan  elektronik, baik  yaang  berupa  teks,  gambar,  maupun  gambar bergerak. SMI  berfungsi  untuk  menyimpan,  pengendalian,  versi,  dan penerbitan  dokumen  tertentu  seperti  berita,  manual operator, manual teknik, panduan penjualan, emasaran, dan brosur. 

SMI  sering  digunakan  dalam  aplikasi  berbasis  web generasi 2.0 karena  dalam web generasi 2.0 terjadi pemisahan antara tampilan dan pengaturan isi web. SMI terdiri dari dua struktur yaitu:

1.       Frontend  adalah  tampilan  halaman  web,  yaitu  halaman yang diakses oleh pengunjung umum. 

2.       Backed  adalah  bagian  administrasi  yang  hanya  bisa diakses  sang  pemilik  portal  maupun  orang-orang  yang telah  ditunjuk  untuk  melakukan  manajemen  portal  atau istilah umumnya halaman admin (admin page). 

SMI  berbeda  dengan  aplikasi  penyunting  HTML  seperti Bluefish,  Microsoft  FrontPage,  Dreamweaver,  Notepad, maupun Text Editor.  SMI juga memungkinkan pengelola menyimpan data di satu tempat,  mengontrol  hak  akses,  dan  alur  kerja  partisipasi pengguna (user) dalam pengembangan portal.  SMI memudahkan proses penciptaan sebuah portal dinamis yang kaya akan isi tapi mudah dioperasikan oleh pengelola atau administrator. Kegiatan  menambah,  memperbaharui,  dan  menghapus  isi dapat dilakukan sendiri tanpa campur tangan langsung dari webmaster.