Post on 25-Mar-2019
Rekayasa WebAndronicus Riyono, M.T.
Universitas Kristen Duta Wacana
Konsep Web, HTML, CSS, Good Sites, Bad Sites
Rekayasa WebPertemuan 2
Teknologi Web
Teknologi Web
Teknologi Web
Teknologi Web
Teknologi Web
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 halaman-
halaman 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:
CDAnda 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 3, 4
56
Langkah 1:Mencari Alamat UKDW
• simulasi:nslookup www.ukdw.ac.id
Teknologi Web
1 2 3, 4
56
Langkah 2:Jawaban DNS
• Server: 4.2.2.1Address: 4.2.2.1#53
Non-authoritative answer:Name: www.ukdw.ac.idAddress: 222.124.22.21
Teknologi Web
1 2 3, 4
56
Langkah 3:Membuka koneksi
• simulasi:telnet 222.124.22.21 80 Trying 222.124.22.21...Connected to21.subnet222-124-22.astinet.telkom.net.id.Escape character is '^]'.
Teknologi Web
1 2 3, 4
56
Langkah 4:HTTP Request
• GET / HTTP/1.1Host: www.ukdw.ac.idUser-Agent: Mozilla/5.0 ...Accept: text/html, ...Accept-Language: en-us, ...Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,...Keep-Alive: 300Connection: keep-alive
Teknologi Web
1 2 3, 4
56
Langkah 5:HTTP Response
• HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:40 GMTServer: Apache/2.0.59 (Win32)Set-Cookie: PHPSESSID=d358af56d20c3ef070e9e6583dd4699a; 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 to21.subnet222-124-22.astinet.telkom.net.id.Escape character is '^]'.
Langkah 4 (lagi):HTTP Request (lagi)
• GET /client/images/front_new/2.gif HTTP/1.1Host: www.ukdw.ac.idUser-Agent: Mozilla/5.0 ...Accept: text/html, ...Accept-Language: en-us, ...Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,......
Langkah 5 (lagi):HTTP Response (lagi)
• HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:45 GMTServer: Apache/2.0.59 (Win32)Last-Modified: Wed, 01 Nov 2006 01:24:52 GMTEtag: "6842-728c-5ea8d43b"Accept-Ranges: bytesContent-Length: 29324 ...
Teknologi Web
1 2 3, 4
56
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)
<p>
Informasi pendaftaran, jadwal tes dan biaya dapat dilihat detail di sini.
</p>
Berarti, bagian ini adalah isi paragrafnya.
ini adalah tanda (tag) p, menandai awal dari sebuah paragraf
ini adalah tanda penutup (closing tag) p, menandai akhir dari sebuah paragraf
{sebuahelemen
p
Struktur dasar halaman HTML
• <html>
• <head>
• <title></title>
• </head>
• <body>
• </body>
• <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
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
• <p>
• Pada tanggal 7 November 2009,
• <a href="http://knastik.org/">
• KNasTIK 2009
• </a>
• akan diselenggarakan di UKDW
• </p>
nest = sarang?
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
• tag yang hanya didukung browser tertentu
• marquee
• blink
• 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 Basic 1.1 (2000, 2008)
• XHTML 1.0 (2000, 2002)
• HTML 4.01 (1999)
• HTML 3.2 (1997)
* 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/quality-within-web-design/
• http://www.sitepoint.com/article/principles-beautiful-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.