Teknologi Web   Disain & Pemrograman Web Teknik Elektro Universitas Brawijaya Herman Tolle, ST., MT - (herman_tolle@yahoo....
Introduksi <ul><li>World Wide Web  adalah layanan internet yang paling populer saat ini </li></ul><ul><li>Internet mulai d...
<ul><li>WWW berjalan dengan protokol  HyperText Transfer Protokol  (HTTP) </li></ul><ul><li>Halaman Web merupakan file tek...
<ul><li>Browser adalah sebuah program aplikasi atau software yang me-request dokumen-dokumen dari komputer-komputer yg ter...
Sejarah World Wide Web <ul><li>hypertext   [Bush 1945, Nelson 1960’s] </li></ul><ul><li>Awal 90’-an,  Tim Berners-Lee , sa...
<ul><li>1993: Browser grafis pertama:  Mosaic  dibuat oleh  Andressen  dan  Eric Bina ( mhs  University of Illinois )  </l...
Trend : Fakta <ul><li>Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari </li></ul><ul><li>Internet menjadi su...
Trend: Killer Application <ul><li>Internet : </li></ul><ul><li>Email </li></ul><ul><li>Online Games </li></ul><ul><li>Chat...
Web growth <ul><li>Stats from  </li></ul><ul><li>Internet Valley, Inc. </li></ul>recent estimates suggest 40-50 M Web site...
Kategori Web  <ul><li>Berdasarkan keter-update-an isi web: </li></ul><ul><li>Web Statis  : website yang isi tampilannya se...
<ul><li>Web Statis     HTML (only) </li></ul><ul><li>Web Dinamis </li></ul><ul><li>HTML plus plus </li></ul><ul><li>+ Pem...
HTML & XHTML <ul><li>HTML juga mengalami perkembangan </li></ul><ul><li>Versi terakhir:  HTML 4.1 </li></ul><ul><li>XHTML ...
HTML <ul><li>Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi  sintaks HTML harus dikuasai  dengan b...
Pemrograman Web <ul><li>Client Side Script  : </li></ul><ul><li>Script yang ditambahkan dalam dokumen html, dieksekusi ole...
Cara Kerja Web
Pemrosesan Script
Client Side Script <ul><li>Script  yang ditambahkan ( embedded ) pada halaman web yang sebelumnya hanya disusun dengan sin...
Client Side Script <ul><li>Advantage: </li></ul><ul><li>Waktu proses relatif cepat karena langsung dieksekusi oleh browser...
Tips Client Side Script: <ul><li>Gunakan untuk proses-proses sisi client  </li></ul><ul><li>Script Javascript mudah untuk ...
Server Side Script <ul><li>Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll </li></ul...
Server Side Script <ul><li>Advantage: </li></ul><ul><li>Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-c...
CSS (Cascading stylesheet) <ul><li>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah...
CSS <ul><li>Teknologi CSS dimaksudkan untuk  mempermudah perancangan web  yang indah dan fleksibel.  </li></ul><ul><li>Fle...
Penggunaan CSS saat ini <ul><li>Kontrol aspek visual keseluruhan halaman website </li></ul><ul><li>Membuat Layout yang sta...
Referensi HTML & CSS <ul><li>CSS-1:  http://www.w3.org/TR/CSS1 </li></ul><ul><li>CSS-2:  http://www.w3.org/TR/CSS2   </li>...
Teknologi & Aplikasi Web <ul><li>ActiveX </li></ul><ul><li>ActiveX  adalah sebuah teknologi integrasi bukan sebuah bahasa ...
Aplikasi berbasis Web <ul><li>E-Commerce : describes the concept of conducting transactions between a buyer and a seller o...
Web Developer <ul><li>Secara garis besar dapat dipisahkan: </li></ul><ul><li>Web Designer : membuat disain web </li></ul><...
Tahapan Pengembangan Website <ul><li>Sebuah website dikembangkan dalam 2 proses besar: </li></ul><ul><li>Web Developing : ...
Peluang  <ul><li>Hadirnya internet dan layanan WWW memberikan sejumlah peluang bagi kita, sebagai: </li></ul><ul><li>Devel...
Fenomena <ul><li>Amazon </li></ul><ul><li>E-Bay </li></ul><ul><li>Anne Ahira </li></ul>
Upcoming SlideShare
Loading in …5
×

02 Teknologi Web

2,518 views

Published on

Materi Kuliah Internet & Disain Web Teknik Elektro Universitas Brawijaya Malang

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,518
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
169
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02 Teknologi Web

  1. 1. Teknologi Web Disain & Pemrograman Web Teknik Elektro Universitas Brawijaya Herman Tolle, ST., MT - (herman_tolle@yahoo.com)
  2. 2. Introduksi <ul><li>World Wide Web adalah layanan internet yang paling populer saat ini </li></ul><ul><li>Internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW </li></ul><ul><li>WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya ( hyperlink ) yang membentuk samudra belantara informasi </li></ul>
  3. 3. <ul><li>WWW berjalan dengan protokol HyperText Transfer Protokol (HTTP) </li></ul><ul><li>Halaman Web merupakan file teks murni ( plain text ) yang berisi sintaks-sintaks HTML yang dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser </li></ul><ul><li>Sintaks HTML mampu memuat konten gambar, audio, video dan animasi </li></ul>
  4. 4. <ul><li>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. </li></ul><ul><li>Browser menampilkan sesuai instruksi (format) HTML yg dibuat pd dokumen tsb. </li></ul>Internet Web Browsers
  5. 5. Sejarah World Wide Web <ul><li>hypertext [Bush 1945, Nelson 1960’s] </li></ul><ul><li>Awal 90’-an, Tim Berners-Lee , sarjana fisika pd riset Nuklir Swiss (CERN) menciptakan HyperText Markup Language (HTML) dan </li></ul><ul><li>Browser teks pertama: Lynx </li></ul><ul><li>Berners-Lee saat ini memimpin WWW Consorsium (W3C) lembaga yang menyusun standarisasi HTML dan dokumen web. </li></ul>
  6. 6. <ul><li>1993: Browser grafis pertama: Mosaic dibuat oleh Andressen dan Eric Bina ( mhs University of Illinois ) </li></ul><ul><li>1994: Andressen kemudian bekerja untuk Netscape , dan membuat Netscape Navigator , browser grafis populer pertama </li></ul><ul><li>1995: Microsoft membuat Internet Explorer </li></ul><ul><li>Browser saat ini: Mozilla FireFox, Opera , dll </li></ul>
  7. 7. Trend : Fakta <ul><li>Browsing / Surfing sudah merupakan aktifitas rutin sehari-hari </li></ul><ul><li>Internet menjadi sumber informasi yang tak terhingga! (apalagi dengan adanya Om Yahoo! dan Mas Google ) </li></ul><ul><li>Jutaan halaman web baru bermunculan setiap hari </li></ul><ul><li>Konten web semakin bervariasi dan dapat dikontribusi oleh siapa saja dimana saja </li></ul>
  8. 8. Trend: Killer Application <ul><li>Internet : </li></ul><ul><li>Email </li></ul><ul><li>Online Games </li></ul><ul><li>Chat ( mIRC , Yahoo Messenger ) </li></ul><ul><li>Google Earth </li></ul><ul><li>Web based : </li></ul><ul><li>Search Engine (Yahoo!, Google ) </li></ul><ul><li>Web Blog </li></ul><ul><li>Web Komunitas: Friendster , MySpace, Multiply, Hi5, Yahoo 360°, YouTube </li></ul>
  9. 9. Web growth <ul><li>Stats from </li></ul><ul><li>Internet Valley, Inc. </li></ul>recent estimates suggest 40-50 M Web sites, with 4-5 B Web pages! Mosaic Netscape IE Dates 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% July 95 6,642,000 120,000 25,000 0.400% July 94 3,212,000 46,000 3,000 0.100% 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
  10. 10. Kategori Web <ul><li>Berdasarkan keter-update-an isi web: </li></ul><ul><li>Web Statis : website yang isi tampilannya selalu sama dan tidak akan pernah berubah kapan pun kita melihatnya. (jika tidak di-update) </li></ul><ul><li>Web Dinamis : website yang isi tampilannya tidak statis </li></ul>
  11. 11. <ul><li>Web Statis  HTML (only) </li></ul><ul><li>Web Dinamis </li></ul><ul><li>HTML plus plus </li></ul><ul><li>+ Pemrograman Web (Scripting) </li></ul><ul><li>+ Animasi Interaktif (Mis: Flash, Java Applet) </li></ul>
  12. 12. HTML & XHTML <ul><li>HTML juga mengalami perkembangan </li></ul><ul><li>Versi terakhir: HTML 4.1 </li></ul><ul><li>XHTML adalah standar baru untuk HTML yang bertujuan: </li></ul><ul><li>memungkinkan sebuah dokumen web dapat dibaca oleh divais baru seperti PDA, ponsel, dll </li></ul><ul><li>Crossbrowser : ditampilkan sama untuk semua jenis browser </li></ul><ul><li>Versi terakhir: XHTML 1.1 </li></ul>
  13. 13. HTML <ul><li>Walaupun membuat website sangat mudah dengan menggunakan tools, tetapi sintaks HTML harus dikuasai dengan baik. </li></ul><ul><li>Membantu dalam mengembangkan fitur yang dinamis: script, applet, konten multimedia, dll. </li></ul><ul><li>may want low-level control </li></ul><ul><li>may care about size/readability of pages </li></ul><ul><li>may want to &quot;steal&quot; page components and integrate into existing pages </li></ul>
  14. 14. Pemrograman Web <ul><li>Client Side Script : </li></ul><ul><li>Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client . </li></ul><ul><li>Javascript, VBScript </li></ul><ul><li>Server Side Script : </li></ul><ul><li>Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client . </li></ul><ul><li>ASP/ASP.Net, PHP, CGI, JSP, dll </li></ul>
  15. 15. Cara Kerja Web
  16. 16. Pemrosesan Script
  17. 17. Client Side Script <ul><li>Script yang ditambahkan ( embedded ) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML. </li></ul><ul><li>Penambahan script ini mempunyai tujuan tertentu. Misalnya: </li></ul><ul><li>menampilkan jam dan tanggal yang up- to-date , </li></ul><ul><li>menu yang dinamis (mis: pull down menu), </li></ul><ul><li>kontrol terhadap sebuah window , </li></ul><ul><li>animasi sederhana , animasi mouse </li></ul><ul><li>maupun untuk validasi form , dll </li></ul>
  18. 18. Client Side Script <ul><li>Advantage: </li></ul><ul><li>Waktu proses relatif cepat karena langsung dieksekusi oleh browser client </li></ul><ul><li>Tidak memerlukan web server untuk hosting </li></ul><ul><li>Dapat dieksekusi langsung oleh berbagai browser </li></ul><ul><li>Disadvantage: </li></ul><ul><li>Script bisa dilihat oleh pengguna </li></ul><ul><li>Script dapat di copy-paste </li></ul><ul><li>Tidak cocok untuk akses data atau database </li></ul>
  19. 19. Tips Client Side Script: <ul><li>Gunakan untuk proses-proses sisi client </li></ul><ul><li>Script Javascript mudah untuk “dibajak” </li></ul><ul><li>Pelajari bagaimana cara “menambahkan” ke website kita </li></ul><ul><li>Source: </li></ul><ul><ul><li>http://www.dynamicdrive.com </li></ul></ul><ul><ul><li>http://www.javascriptsource.com </li></ul></ul>
  20. 20. Server Side Script <ul><li>Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll </li></ul><ul><li>PHP : open source dan banyak digunakan luas </li></ul><ul><li>Active Server Pages (ASP) dan ASP.Net , teknologi yang dikembangkan oleh Microsoft </li></ul><ul><li>ColdFusion (CFM), dikembangkan oleh Macromedia </li></ul><ul><li>Java Server Pages dan Servlet dikembangkan oleh Sun Microsystem </li></ul><ul><li>Common Gateway Interface (CGI), yang dibuat dengan bahasa pemrograman C++ atau Perl </li></ul><ul><li>Server Side Include (SSI), seperti misalnya Frontpage Server Extension </li></ul>
  21. 21. Server Side Script <ul><li>Advantage: </li></ul><ul><li>Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste </li></ul><ul><li>Cocok untuk akses data atau aplikasi database </li></ul><ul><li>Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll </li></ul><ul><li>Disadvantage: </li></ul><ul><li>Waktu proses relatif lebih lambat karena dieksekusi oleh server </li></ul><ul><li>Memerlukan web server untuk hosting </li></ul>
  22. 22. CSS (Cascading stylesheet) <ul><li>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. </li></ul><ul><li>Kita dapat mengontrol isi (konten) dan tampilan secara terpisah. </li></ul><ul><li>Perubahan konten tidak mengharuskan kita melakukan perubahan tampilan, demikian juga sebaliknya. </li></ul>
  23. 23. CSS <ul><li>Teknologi CSS dimaksudkan untuk mempermudah perancangan web yang indah dan fleksibel. </li></ul><ul><li>Fleksibilitas adalah hal yang tidak akan diperoleh jika menggunakan HTML saja. </li></ul><ul><li>Satu file CSS (*.css) dapat digunakan untuk banyak halaman. Sehingga perubahan disain visual untuk banyak halaman dapat dilakukan hanya melalui modifikasi satu file CSS </li></ul>
  24. 24. Penggunaan CSS saat ini <ul><li>Kontrol aspek visual keseluruhan halaman website </li></ul><ul><li>Membuat Layout yang standart (kolaborasi dengan XHTML) </li></ul><ul><li>Teknik membuat layout HTML: </li></ul><ul><li>Frame  cara lama, jarang digunakan </li></ul><ul><li>Tabel  disukai oleh designer </li></ul><ul><li>CSS  metode baru, menjadi standar </li></ul>
  25. 25. Referensi HTML & CSS <ul><li>CSS-1: http://www.w3.org/TR/CSS1 </li></ul><ul><li>CSS-2: http://www.w3.org/TR/CSS2 </li></ul><ul><li>HTML: http://www.w3.org/TR/html41 </li></ul><ul><li>XHTML: http://www.w3.org/TR/xhtml11 </li></ul>
  26. 26. Teknologi & Aplikasi Web <ul><li>ActiveX </li></ul><ul><li>ActiveX adalah sebuah teknologi integrasi bukan sebuah bahasa pemrograman. </li></ul><ul><li>ActiveX dapat disebut sebagai lem yang menyatukan berbagai macam kode bahasa pemrograman sehingga dapat bekerja sama menjadi sebuah aplikasi Internet. </li></ul><ul><li>ActiveX mirip dengan OLE ( Object Linking and Embedding ). </li></ul><ul><li>Ditandai dengan tag <OBJECT> pada html </li></ul><ul><ul><li>Java Applet </li></ul></ul><ul><ul><li>Flash (Shockwafe) </li></ul></ul><ul><ul><li>Komponen ActiveX (develop dg VBScript) </li></ul></ul><ul><ul><li>dll </li></ul></ul>
  27. 27. Aplikasi berbasis Web <ul><li>E-Commerce : describes the concept of conducting transactions between a buyer and a seller over an electronic network (Internet) </li></ul><ul><li>E-Business : describes all aspects of doing business on/with/through the Internet. E-Business includes all aspects of E-commerce </li></ul><ul><li>E-Learning, E-Government, dan </li></ul><ul><li>E-E yang lainnya … </li></ul>
  28. 28. Web Developer <ul><li>Secara garis besar dapat dipisahkan: </li></ul><ul><li>Web Designer : membuat disain web </li></ul><ul><li>Web Programmer : membuat script untuk halaman web </li></ul><ul><li>Web Administrator : sebagai administrator web </li></ul>
  29. 29. Tahapan Pengembangan Website <ul><li>Sebuah website dikembangkan dalam 2 proses besar: </li></ul><ul><li>Web Developing : proses hingga jadi halaman-halaman web secara lengkap dan siap tayang </li></ul><ul><li>Web Deploying : proses untuk membuat website terpasang pada server internet dan dapat diakses orang lain </li></ul>
  30. 30. Peluang <ul><li>Hadirnya internet dan layanan WWW memberikan sejumlah peluang bagi kita, sebagai: </li></ul><ul><li>Developer Web </li></ul><ul><li>Content Updater/Kontributor </li></ul><ul><li>Network/Web Administrator </li></ul><ul><li>E-Commerce / Online Business </li></ul><ul><li>Interaksi Bisnis </li></ul><ul><li>dll </li></ul>
  31. 31. Fenomena <ul><li>Amazon </li></ul><ul><li>E-Bay </li></ul><ul><li>Anne Ahira </li></ul>

×