Perencanaan Web

Tutun JuhanaTelematics LaboratoryElectrical Engineering DepartmentInstitut Teknologi Bandunghttp://telecom.ee.itb.ac.id/~tutun

2/45

Apakah web site itu?

Sekumpulan “halaman” yang salingberhubungan yang dapat diakses publikmelalui World Wide WebSuatu web sites biasanya mengandung teksdan gambarWeb sites memiliki keuntungan dalam halketersediaan interaksi antara user dan situsitu sendiri

3/45

Supaya dapat eksis di Internet (Internet Presence)

Kombinasi dari:Website yang dirancang dengan baikPromosi yang dilakukan terus menerusInteraksi yang rutin antara pemirsa dengan andamelalui website dan InternetPenerapan aplikasi pada websitePenggunaan tool web lainnya (misalnya e-mail)

4/45

Internet Presence Tipikal

5/45

Cara kerja Web

users (clients) browse

Internet

(WWW)

WWW servers

authors write HTMLresources

(HTML files)

httphttp

6/45

Client

user-agentProgram yang digunakan untuk melakukanrequest ke server dan mengolah respon dariservercontoh:

telnet www.itb.ac.id 80browser (MS IE, Netscape, Opera, Amaya, ...)spider/robot

7/45

BrowserMenampilkan informasi yang berasal dariserver (teks dan gambar (GIF, JPEG dsb.)Ada dua macam:

Hanya menampilkan teks (contoh: Lynx, ...)Bisa menampilkan grafis (MSIE, Netscape, ...)

Biasanya ada perbedaan penampakanantara satu browser dengan browser lainnya

8/45

ServerBerbentuk program (daemon, httpd):

Menanggapi koneksi TCP dan menyediakanlayanan bagi client

Web servers : server yang menyediakanlayanan webWeb site = host + Web server + information (file system)

9/45

Model web dengan proxy

servers

proxy

clients

10/45

URL - locating Internet resourcesURL: Uniform Resource Locator URL merupakan identifier yang unik bagi suatusumber daya di InternetMengindikasikan:

Cara mengakseslokasi

Syntax yang sederhana:protocol://host_name[:port_num][/path][/file_name]contoh:http://www.ceenet.org/constitution.html

11/45

3 Komponen dari suatu Web Site1. Domain Name

www.yourcompany.comAda iuran tahunan (ada juga yang bulanan) yang harus dibayarDiperoleh melalui suatu “Registrar”

2. Desain dari web site itu sendiri3. Menyediakan hosting untuk Web Site

Tempat menyimpan files web site agar dapatdiakses publikAda biaya tahunannya juga

12/45

Apa yang menyebabkan suatu web site disebut berkualitas baik?

Target audience yang tepat (tampilan, atau bahasa)Menarik secara estetikaWaktu download yang cepatKemudahan navigasiKemudahan penggunaanKompatibel dengan berbagai macam browserKompatibel dengan bermacam resolusi layar(misalnya 800x600, 1024x768)Keamanan aksesCredible

13/45

Perencanaan Web Site

Menentukan tujuan dibuatnya suatu web siteMenganalisa pemirsa (audience)Menganalisa kompetisiMemahami kemampuan dan sumber dayayang kita milikiMemetakan web site yang sudah adaMerancang web site baru

14/45

Tujuan dan Panduan untuk Suatu Web Site

Kenapa anda membuat web site?Apa yang ingin dicapai oleh si pemilik web site?Apa tindakan pengunjung web site yang diharapkan oleh pemilik web site?Apa batasan atau panduan yang harusdipatuhi ketika merancang sebuah web siet?

15/45

Analisa AudienceSiapa yang menjadi target anda?

UmurBahasa dan budayaTingkat pendidikanAkses ke web (High-speed? Dial-in?)Ke-familiaran terhadap WebHambatan pengaksesan

Apa yang mereka cari dari web site anda? InformasiLayananKomunitas

Bisa jadi ada lebih darisatu target audience

16/45

Bagaimana cara mengenal audience anda?Bertanya ke pemilik web siteMenganalisa log dan statistik web siteMenanyakan pada orang yang sudahmenjadi audienceMereview hasil penelitian yang dipublikasikanMembuat sarana feedback pada web site andaMengenal perilaku audience secara umumterhadap web site anda

17/45

Menganalisa kompetisi

Perhatikan web site lain yang isinya serupadengan web site andaMenganalisa trendApa kelebihan dan kelemahan web site lain?Apakah web site anda harus sesuai denganparent site?

18/45

Memahami kemampuan dan sumber dayayang kita miliki

Pengetahuan teknis apa yang anda miliki?Tool dan sumber daya apa yang tersedia sertaseberapa banyak waktu yang anda miliki?

SoftwareWeb authoring toolsImage editing and toolsAnimation tools

HardwareCamera (video and/or still)Scanner

Orang lain

Berpikir jangka panjanglah!Pastikan anda memilikisumber daya (orang dan teknis)untuk me-maintain web site anda

19/45

Memetakan web siteMemetakan seluruh halaman dan link dari web site yang sudah adaHalaman dinyatakan oleh kotak sedangkan garismenunjukkan linkTunjukkan seberapa “dalam” web site anda

20/45

Mengenai kedalaman suatu web site

Dalam dan sempitHanya ada sedikit link pada setiap halamanBanyak tingkatan halaman

Dangkal dan luasBanyak link pada setiap halaman (terutamahalaman utama)Seringkali hanya ada sedikit tingkatan halaman

21/45

Struktur yang dalamStruktur yang dangkal

22/45

Merancang atau merancang ulang web siteMereview kebutuhan/keinginan audienceMenentukan struktur web site (peta web site)Mengumpulkan isi web site (informasi, visual)Membuat rancangan visualMembangun web site dalam mode “test”Lakukan pengujian user dan kalau perlu lakukanperubahanLakukan pembuatan websiteWeb site di-maintain dan di-update

Setiap langkah harusdikonsultasikan denganpemilik web site

23/45

HTML (Hypertext Markup Language)HTML adalah bahasa dari WWWFile HTML = halaman webSyntax HTML

Dokumen HTML mengandung tag markup<H1> Example </H1>

tags adalah case insensitive<H1> atau <h1> sama saja

Atribut tag bisa case sensitiveMisalnya namafile

Tag biasanya berpasangan yang terdiri dari tag pembukadan penutup

<H1> Example </H1>

24/45

Dokumen HTML

. . . <tag attribute=“value” . . .> . . . </tag> . . .

text and/or tags

element (tag pair)

25/45

Dokumen HTML yang minimal

<html><head><title> document title </title></head><body>document body - text . . .</body></html>

26/45

Cascading Style Sheets (CSS)Mekanisme untuk menambahkan style kesebuah dokumen HTMLDibuat untuk memisahkan isi dari penampakanContoh penggunaan CSS<STYLE TYPE=“text/css”>css rules ...</STYLE>____________________________________________

<LINK REL="STYLESHEET" TYPE="text/css"HREF=".../my_style.css">

____________________________________________

<TAG STYLE=“css-rule;...;css-rule”>...</TAG>

27/45

Active Web pagesUntuk meningkatkan web site anda

Interaksi dua arahAnimasi halamanMultimedia yang lebih baikAkses ke sistem lain…….

28/45

Active Web pagesBeberapa teknik yang bisa digunakan:

CGI - Common Gateway InterfaceServer WWW berkomunikasi dengan program lain(CGI scripts)

SSI - Server Side Includes (*.shtml)PHPAPI - Application Programming InterfaceCookies (“making a browser remember”)scripting languages (embedded in HTML document)

Javascript, VBscript, …DHTMLJava (applets, servlets)ActiveX

29/45

Active Web pages

Who is doing the job?

browser downloads and automatically executes program (Java applet)

ORHTML document is generated on the server machine (by CGI or PHP script)

30/45

Active Web pages

CGI program

other program

(application)

WWW server

API

WWW client

Java servlet

Java applet

script (embedded in HTML)

SSI

HTTP

server side

client side

CGI

31/45

Active Web pages

contoh:forms (feedback processing)

special tags: <FORM>, <INPUT>, <SELECT>, ...Biasanya skrip CGI dan PHP digunakan untuk mengolahform

active maps (clickable maps)special tags and attributes: <MAP>, <IMG>, ...client-side or server-side (CGI scripts are used)

database or other internet service gateways

32/45

Cookiescookies.txtInformasi mengenai komunikasi antara client dan serverData dikirimkan dalam sebuah header Set-Cookie oleh server.. dikembalikan di dalam header Cookie olehbrowser bila server tersebut dikunjungisecurity ?

33/45

Scripting languagesJavaScript, VBScript, ...embedded in HTML sourceworkload is on the clients sidesimple example:

<HTML><HEAD><SCRIPT LANGUAGE=“JavaScript”>

document.write(“Hello World!”)</SCRIPT>

</HEAD><BODY>

Example</BODY></HTML>

34/45

Javaobject oriented programming languageplatform independent programs are transferred via network and executed on client side - appletsJava programs executing on server side - servletsspecial development tools (JDK, …)http://www.javasoft.comhttp://www.javaworld.comhttp://www.gamelan.com

35/45

Security

plain WWW is not secure!

security on: content level

PGP, data encriptionchannel level

SSL (Secure Socket Layer)message level

SHTTP, PEP, ...

36/45

Authoring (membuat) halaman WebKita memerlukan:

authoring tools untuk membuat materiHTML authoring toolstools untuk mengedit grafis dan multimedia...

Web serverBeberapa mekanisme publikasi

Paling tidak kemampuan mengupload file ke server

37/45

Authoring HTML filesFile HTML dapat dibuat menggunakan:

simple editorsspecialized tools (HTML authoring tools)

Tool tambahanUntuk membuat (mengedit) multimedia (graphics, audio, video)Untuk validasi HTML validationuntuk mengembangkan kode Java (JDK)Untuk maintenance web site ...

38/45

Notepad, vi, emacs, joe, ...Harus mengerti betul HTMLSangat mungkin timbul kesalahanPerlu validasiBaik untuk halaman tunggalTidak sering digunakan lagi denganadanya tool khusus untuk membuathalaman HTML (authoring tools)

Simple editors

39/45

Authoring toolsDreamweaver, Adobe GoLive, HomeSite, HotMetal, Netscape Composer, MS Front Page, MS Office, ...commercial, shareware, freewareMemudahkan penulisan HTMLMenawarkan WYSIWYG (What You See Is What You Got)Validasi secara otomatisSelalu dikembangkan

40/45

Authoring tools

Fitur tambahan:CSS editor(Java)script editortemplates (web pages, style sheets)image editing (clickable maps, …)handling multimedia objectsweb site maintenance capabilitiesdatabase support (ODBC)...

41/45

Where to put the files?

index.html

*.htm, *.html

.../

...

htdocs/

conf/

cgi-bin/

...

httpd/

index.html

*.htm, *.html

.../

...

public_html/ .../

~login/ .../

users/ .../

/...

42/45

Where to put the files?

• WWW server document tree:> cd /…/htdocs/> chmod 775 .> vi index.html> ...(upload and/or edit files)...> chmod 664 *

• Home Pages:> cd> chmod 711 .> mkdir public_html> chmod 755 public_html> ...(upload and/or edit files)...> chmod 644 *

43/45

Mempromosikan Web siteDaftarkan web site anda ke search engine :

“one is nothing”follow the rulesuse meta tags

promotion tools:http://www.submit-it.comhttp://www.register-it.comhttp://www.ambition.com/register

44/45

Good practicesIkuti standard HTML yang sudah ada

Jangan menggunakan ekstension yang khususJanga menggunakan tag yang baru munculPikirkan semua user:

(all) browsers and computer platforms

45/45

What is a bad design?Halaman terlalu panjang, terlalu banyak scrolling, dan teks yang membosankanTidak terstrukturTidak ada navigasiURL terlalu panjangTerlalu banyak multimedia

Gambar besarTerlalu banyak gambar dan/atau video clipsGangguan musikAnimasi yang membosankan

Kualitas gambar jelek