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

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

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

Teknologi Web

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

Linear Media vs. Hypermedia

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

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.

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

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

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

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

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

Movie I: Warriors of the NET http://www.warriorsofthe.net/

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

Teknologi Web 1 2 6 3, 4 5

Langkah 1: Mencari Alamat UKDW simulasi: nslookup www.ukdw.ac.id

Langkah 2: Jawaban DNS Server: 4.2.2.1 Address: 4.2.2.1#53 Non-authoritative answer: Name: www.ukdw.ac.id Address: 222.124.22.21

Langkah 3: Membuka koneksi simulasi: telnet 222.124.22.21 80 Trying 222.124.22.21... Connected to 21.subnet222-124-22.astinet.te lkom.net.id. Escape character is '^]'.

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

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

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

Langkah 5 (lanjutan): HTTP Response <TD ROWSPAN=3> <img src="http:// www.ukdw.ac.id//client/images/ front_new/2.gif" width=185 height=238 alt=""> </TD>

Langkah 3 (lagi): Membuka koneksi (lagi) simulasi: telnet 222.124.22.21 80 Trying 222.124.22.21... Connected to 21.subnet222-124-22.astinet.te lkom.net.id. Escape character is '^]'.

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

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

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

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

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 * http://www.merriam-webster.com/dictionary/markup

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

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

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

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

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

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

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!

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) * http://www.w3.org/tr/#recommendations

Keuntungan menggunakan standar Accessibility To software/machines To people Stability * http://www.webstandards.org/learn/faq/#p3

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

Validasi http://validator.w3.org/ agar kita tahu yang kita buat sudah memenuhi standar atau belum kesalahan umum: tag img tanpa atribut alt lupa closing tag

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

Site evolution http://mboffin.com/post.aspx?id=1619

Good Site / Bad Site

Diskusi: Good Sites Bad Sites Perusahaan yang membuat websites http://envato.com http://www.designbylinda.com http://www.designbylinda.com/design.htm

Diskusi: Good Sites Bad Sites Social Network http://facebook.com http://friendster.com

Diskusi: Good Sites Bad Sites Social Network http://www.carleton.ca/ http://www.ukdw.ac.id/

Artikel-artikel http://wefunction.com/2009/04/qualitywithin-web-design/ http://www.sitepoint.com/article/principlesbeautiful-web-design/

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!

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: ukdw@riyono.net

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