1 Teknologi Web dan Desain Aplikasi Web 12 Internet Web Browsers Browser adalah sebuah program aplikasi atau software yang me-request dokumen-dokumen ...
Internet Web Browsers • Browser adalah sebuah program aplikasi atau software yang me-request dokumen-dokumen dari komputer-komputer yg terkoneksi internet (server) di seluruh dunia, dan menampilkan informasi dari dokumen tersebut pd window browser. • Browser menampilkan sesuai instruksi (format) HTML yg dibuat pd dokumen tsb.
090411100013_RW2012
2
Trend : Fakta • Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari • Internet menjadi sumber informasi yang tak terhingga! (apalagi dengan adanya Om Yahoo! dan Mas Google) • Jutaan halaman web baru bermunculan setiap hari • Konten web semakin bervariasi dan dapat dikontribusi oleh siapa saja dimana saja 090411100013_RW2012
3
Trend: Killer Application Internet: • Email • Online Games • Chat (mIRC, Yahoo Messenger) • Google Earth Web based: • Search Engine (Yahoo!, Google) • Web Blog • Web Komunitas: Friendster, MySpace, Multiply, Hi5, 090411100013_RW2012 Yahoo 360°, YouTube
4
Web growth Dates
• Stats from • Internet Valley, Inc.
Hosts
Domains
Web Sites
Sites/ Hosts
July 01
126,000,000
30,000,000
28,200,000
22.381%
July 98
37,000,000
4,300,000
4,270,000
12.000%
July 97
19,540,000
1,301,000
1,200,000
6.200%
July 96
12,881,000
488,000
300,000
2.300%
IE Netscape
July 95
6,642,000
120,000
25,000
0.400%
July 94
3,212,000
46,000
3,000
0.100%
Mosaic
July 93
1,776,000
26,000
150
0.010%
July 92
992,000
16,300
50
0.005%
July 89
130,000
3,900
July 81
210
1969
4
090411100013_RW2012 recent estimates suggest 40-50 M Web sites, with 4-5 B Web pages!
5
Kategori Web Berdasarkan keter-update-an isi web: 1. Web Statis : website yang isi tampilannya selalu sama dan tidak akan pernah berubah kapan pun kita melihatnya. (jika tidak diupdate) 2. Web Dinamis: website yang isi tampilannya tidak statis 090411100013_RW2012
6
1. 2. • • •
Web Statis HTML (only) Web Dinamis HTML plus plus + Pemrograman Web (Scripting) + Animasi Interaktif (Mis: Flash, Java Applet)
090411100013_RW2012
7
HTML & XHTML • HTML juga mengalami perkembangan • Versi terakhir: HTML 4.1 • XHTML adalah standar baru untuk HTML yang bertujuan: • memungkinkan sebuah dokumen web dapat dibaca oleh divais baru seperti PDA, ponsel, dll • Crossbrowser: ditampilkan sama untuk semua jenis browser • Versi terakhir: XHTML 1.1 090411100013_RW2012
8
HTML • Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi sintaks HTML harus dikuasai dengan baik. • Membantu dalam mengembangkan fitur yang dinamis: script, applet, konten multimedia, dll. • may want low-level control • may care about size/readability of pages • may want to "steal" page components and integrate into existing pages 090411100013_RW2012
9
Pemrograman Web Client Side Script : • Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client. • Javascript, VBScript Server Side Script: • Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client. • ASP/ASP.Net, PHP, CGI, JSP, dll 090411100013_RW2012
10
Cara Kerja Web
090411100013_RW2012
11
Pemrosesan Script Web Browser (Client side processing) HTML JavaScript Java Applets
HTTP
Web Server
Server Side Processing CGI SSI Servlet PHP JSP ASP
Databases 090411100013_RW2012
12
Client Side Script • Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML. • Penambahan script ini mempunyai tujuan tertentu. Misalnya: • menampilkan jam dan tanggal yang up- to-date, • menu yang dinamis (mis: pull down menu), • kontrol terhadap sebuah window, • animasi sederhana, animasi mouse • maupun untuk validasi form, dll 090411100013_RW2012
13
Client Side Script Advantage: • Waktu proses relatif cepat karena langsung dieksekusi oleh browser client • Tidak memerlukan web server untuk hosting • Dapat dieksekusi langsung oleh berbagai browser Disadvantage: • Script bisa dilihat oleh pengguna • Script dapat di copy-paste • Tidak cocok untuk akses data atau database 090411100013_RW2012
14
Tips Client Side Script: • Gunakan untuk proses-proses sisi client • Script Javascript mudah untuk “dibajak” • Pelajari bagaimana cara “menambahkan” ke website kita • Source: – http://www.dynamicdrive.com – http://www.javascriptsource.com 090411100013_RW2012
15
Server Side Script • Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll • PHP: open source dan banyak digunakan luas • Active Server Pages (ASP) dan ASP.Net, teknologi yang dikembangkan oleh Microsoft • ColdFusion (CFM), dikembangkan oleh Macromedia • Java Server Pages dan Servlet dikembangkan oleh Sun Microsystem • Common Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau Perl • Server Side Include (SSI), seperti misalnya Frontpage Server Extension 090411100013_RW2012
16
Server Side Script Advantage: • Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat dicopy-paste • Cocok untuk akses data atau aplikasi database • Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll Disadvantage: • Waktu proses relatif lebih lambat karena dieksekusi oleh server • Memerlukan web server untuk hosting 090411100013_RW2012
17
CSS (Cascading stylesheet) • CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. • Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. • Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya. 090411100013_RW2012
18
CSS • Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. • Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. • Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS 090411100013_RW2012
19
Penggunaan CSS saat ini • Kontrol aspek visual keseluruhan halaman website • Membuat Layout yang standart (kolaborasi dengan XHTML) Teknik membuat layout HTML: • Frame cara lama, jarang digunakan • Tabel disukai oleh designer 090411100013_RW2012 • CSS metode baru, menjadi standar
Teknologi & Aplikasi Web ActiveX • ActiveX adalah sebuah teknologi integrasi bukan sebuah bahasa pemrograman. • ActiveX dapat disebut sebagai lem yang menyatukan berbagai macam kode bahasa pemrograman sehingga dapat bekerja sama menjadi sebuah aplikasi Internet. • ActiveX mirip dengan OLE (Object Linking and Embedding). • Ditandai dengan tag
