1 Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana2 Konsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 23 Teknolo...
Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana
Konsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 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 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
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
{
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 • • • • • • •
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 nest = sarang?
•
• Pada tanggal 7 November 2009, • • KNasTIK 2009 • • akan diselenggarakan di UKDW •
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
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/
