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)
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)
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
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