Rekayasa Web. Andronicus Riyono, M.T. Universitas Kristen Duta Wacana

Ukuran: px

Mulai penontonan dengan halaman:

Download "Rekayasa Web. Andronicus Riyono, M.T. Universitas Kristen Duta Wacana"

Susanto Lesmana
7 tahun lalu
Tontonan:

1 Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana

2 Konsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

3 Teknologi Web

4 Teknologi Web

5 Teknologi Web

6 Teknologi Web

7 Teknologi Web

8 Teknologi Web

9 HyperText HTTP (HyperText Transfer Protocol) HTML (HyperText Markup Language) XHTML (extensible HyperText Markup Language) Hyper... apa sih? Hiperaktif?

10 Linear Media vs. Hypermedia

11 Linear media Media yang untuk mengakses informasi di dalamnya pengguna perlu melalui sebuah urutan tertentu yang linier

12 Contoh Linear Media: Buku Ada urutan tertentu dari awal hingga akhir. Ketika Anda diminta untuk membaca halaman tertentu (misal, halaman 232) Anda perlu menelusuri halamanhalaman buku tersebut.

13 Contoh Linear Media: Kaset Ada urutan tertentu dari awal hingga akhir. Ketika Anda ingin memutar lagu ketiga, Anda perlu menelusuri kaset tersebut (dengan fast-forward, stop, play, rewind).

14 Hypermedia Media yang untuk mengakses informasi di dalamnya pengguna dapat menuju secara langsung ke informasi yang diinginkan

15 Contoh Hypermedia: CD Anda bisa langsung mendengarkan lagu ketiga dengan menekan tombol angka 3 pada Remote Control CD Player

16 Contoh Hypermedia: Website! Sekumpulan link, sebuah klik, dan Anda dibawa ke halaman lain dari website tersebut, atau bahkan dari website lain

17 Hypermedia + Text Hypermedia + Text = Hypertext Hyperlink, untuk menghubungkan antara dokumen yang satu dengan dokumen yang lain

22 Movie I: Warriors of the NET

23 Apa yang terjadi antara browser dan server? Kasus: Membuka halaman web UKDW

24 Teknologi Web , 4 5

25 Langkah 1: Mencari Alamat UKDW simulasi: nslookup

26 Teknologi Web , 4 5

27 Langkah 2: Jawaban DNS Server: Address: #53 Non-authoritative answer: Name: Address:

28 Teknologi Web , 4 5

29 Langkah 3: Membuka koneksi simulasi: telnet Trying Connected to 21.subnet astinet.te lkom.net.id. Escape character is '^]'.

30 Teknologi Web , 4 5

31 Langkah 4: HTTP Request GET / HTTP/1.1 Host: User-Agent: Mozilla/ Accept: text/html,... Accept-Language: en-us,... Accept-Encoding: gzip,deflate Accept-Charset: ISO ,... Keep-Alive: 300 Connection: keep-alive

32 Teknologi Web , 4 5

33 Langkah 5: HTTP Response HTTP/1.x 200 OK Date: Tue, 01 Sep :13:40 GMT Server: Apache/ (Win32) Set-Cookie: PHPSESSID=d358af56d20c3ef070e9 e6583dd4699a; path=/ Expires: Thu, 19 Nov :52:00 GMT...

34 Langkah 5 (lanjutan): HTTP Response <HTML> <HEAD> <TITLE>UKDW Official Site</ TITLE> <link href=" style/style.css" rel="stylesheet" type="text/ css">...

35 Langkah 5 (lanjutan): HTTP Response <TD ROWSPAN=3> <img src=" front_new/2.gif" width=185 height=238 alt=""> </TD>

36 Langkah 3 (lagi): Membuka koneksi (lagi) simulasi: telnet Trying Connected to 21.subnet astinet.te lkom.net.id. Escape character is '^]'.

37 Langkah 4 (lagi): HTTP Request (lagi) GET /client/images/front_new/ 2.gif HTTP/1.1 Host: User-Agent: Mozilla/ Accept: text/html,... Accept-Language: en-us,... Accept-Encoding: gzip,deflate Accept-Charset: ISO ,......

38 Langkah 5 (lagi): HTTP Response (lagi) HTTP/1.x 200 OK Date: Tue, 01 Sep :13:45 GMT Server: Apache/ (Win32) Last-Modified: Wed, 01 Nov :24:52 GMT Etag: " c-5ea8d43b" Accept-Ranges: bytes Content-Length:

39 Teknologi Web , 4 5

40 Langkah 6: Browser Menampilkan Halaman lengkap setelah 8 HTTP Request/Response lainnya...

43 Apa perbedaannya? urutan pemanggilan file-file bisa berbeda waktu yang diperlukan untuk mendapatkan file-file bisa berbeda bahkan untuk mengambil file yang sama, waktu yang diperlukan bisa berbeda dalam kesempatan yang berbeda total waktu yang diperlukan untuk membuka sebuah halaman web tidak sama tiap kali

44 HyperText Markup Language mark = tanda, marker = penanda, marking = memberi tanda Main Entry: markup language * Function: noun Date: 1980 : a system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page especially for electronic transmission and display *

45 Memberi tanda (tag) sebuah elemen p { <p> </p> ini adalah tanda (tag) p, menandai awal dari sebuah paragraf Berarti, bagian ini adalah isi paragrafnya. Informasi pendaftaran, jadwal tes dan biaya dapat dilihat detail di sini. ini adalah tanda penutup (closing tag) p, menandai akhir dari sebuah paragraf

46 Struktur dasar halaman <html> <head> <title></title> </head> <body> </body> <html> HTML

47 Kepala dan Badan Head Berisi hal-hal selain isi (content) dari halaman web tersebut Body Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

48 Kepala dan Badan Head Berisi hal-hal selain isi (content) dari halaman web tersebut Body Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

49 nested tags nest = sarang? <p> Pada tanggal 7 November 2009, <a href=" KNasTIK 2009 </a> akan diselenggarakan di UKDW </p> atribut

50 Movie 2: The Machine is Us/ing Us The Machine is Us/ing Us. by Michael Wesch First Released on January 31st mediatedculture.htm

51 Tag Soup opening tags, tanpa closing tags marquee blink tag yang hanya didukung browser tertentu berkesan tidak rapi, semacam seonggok tags dan berbagai macam isi lainnya (teks), itulah mengapa disebut sebagai tag soup

52 Browser war Persaingan antar browser, masing-masing merasa diri lebih unggul dari yang lain Misal Proprietary Tags (marquee, blink, dll.) Rendering engine Akibatnya Tampilan berbeda antar browser!

53 Web Standard* (markup) XHTML 1.1 (2001, 2008) XHTML 1.0 (2000, 2002) HTML 4.01 (1999) HTML 3.2 (1997) XHTML Basic 1.1 (2000, 2008) *

54 Keuntungan menggunakan standar Accessibility To software/machines To people Stability *

55 XHTML 1.0 Transitional XHTML = HTML ditulis dengan kaidah XML Well-structured (properly nested tags) Case-sensitivity (all lowercased element) lebih baik dari HTML 4.01 masih cukup fleksibel jika bisa, XHTML 1.1 lebih baik lagi

56 Validasi agar kita tahu yang kita buat sudah memenuhi standar atau belum kesalahan umum: tag img tanpa atribut alt lupa closing tag

59 CSS Cascading Style Sheets Mengatur bagaimana elemen-elemen HTML yang ada pada sebuah halaman web ditampilkan oleh browser

60 Site evolution

61 Good Site / Bad Site

63 Diskusi: Good Sites Bad Sites Perusahaan yang membuat websites

64 Diskusi: Good Sites Bad Sites Social Network

65 Diskusi: Good Sites Bad Sites Social Network

66 Artikel-artikel

67 Tugas Pribadi Baca Head First Web Design, Chapter 1 & 2 Buat untuk website UKDW Visual Metaphor Theme (termasuk Color palette, Layout, visual elements, Central Themes, Interface Elements) Tidak ada maksimal halaman, be concise Be creative!

68 Perhatian! Margin: (atas, kanan, bawah, kiri) 3, 3, 4, 4cm Font: Verdana 12pt, Spacing: 1,5 spasi Filetype: PDF Subject: REKWEB-TUGAS2 Nama File: REKWEB-TUGAS2-22xxxxxx.pdf dikirim ke:

69 Referensi Lowe, D., & Hall, W. (1998). Hypermedia and the web: An engineering approach.new York, NY: Wiley.

dokumen-dokumen yang mirip

Rekayasa Web. Andronicus Riyono, M.T. Universitas Kristen Duta Wacana

Rekayasa Web. Andronicus Riyono, M.T. Universitas Kristen Duta Wacana Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana Andronicus Riyono http://facebook.com/riyono riyono@gmail.com ukdw@riyono.net http://lecturer.ukdw.ac.id/riyono Silabus Singkat Matakuliah