Pengantar Teknologi Web 3

Antonius Rachmat C
Teknologi Web Client
• Web browser
• HTML / XML / XHTML
• Javascript / VBScript
• CSS
• Flash player
• Java Applet
• ActiveX / Plugin: program yg terintegrasi dgn browser
• Helper: program yg terinstall di client
Pengembangan sisi client
• Local environment (prosesor, browser, memory, vga, dll)
• Tidak ada kontrol oleh web developer
• Memberikan saran kepada user
– Cth: resolusi 1024 x 768
• Memberi pilihan kepada user
– Cth: javascript harus aktif
• Client / user profiling
Pertimbangan Client
• Kebutuhan dan keinginan user berbeda satu dengan yang lain.
• Pengaruh gender, umur, pendidikan, hobi, pengalaman, latarbelakang, budaya, dll.
• User memiliki tujuan, tugas web developer adalah membantu user mencapai tujuannya (download program, akses jadwal, mencetak daftar harga, dll)
Pertimbangan jaringan
• Bandwidth
– Modem = 56KBps; T1 = 1.5MBps
• Latency: waktu yang diperlukan sebuah paket data untuk menempuh jarak yang menghubungkan dua buah sistem
• Utilization, lalu lintas data pada suatu jaringan.
Web Browser
• MS Internet Explorer (Windows)
• Netscape Navigator/Communicator (Windows & Linux)
• Mozila Firefox (Windows & Linux)
• Opera (Windows & Linux)
• Konqueror (Linux)
• lynx, berbasis teks (Linux)
HTML
• Hypertext Markup Language
• Text based
• Menggunakan tag (tanda) < dan >
• Tujuannya: untuk tampilan di halaman web
• Bahasanya baku
• Ekstensi : .html , .htm



Tags vs. elements
• HTML specifies a set of tags that identify structure and content type
– tags are enclosed in < >
• specifies an image
• most tags come in pairs, marking a beginning and ending an HTML element is an object enclosed by a pair of tags
• is a TITLE element
• This text appears bold. is a BOLD element
•

Part of this text is bold.

» is a PARAGRAPH element that contains a BOLD element
• enclose the title of a page
• HTML document is a collection of elements (text/media with context)

























Frame controversy
• frames are probably the most controversial HTML feature
– some people love them, some people hate them
– 2 reasonable uses for frames
– as a navigational aid:
• can divide the screen into a static menu frame and the main frame for navigating a site
• e.g., www.creighton.edu/~davereed
– as a means of separating program input from output:
• can divide the screen into a static man input form frame and the main frame for displaying output
• e.g., www.creighton.edu/~davereed/csc551/JavaScript/story.html





External style sheets
• modularity is key to the development and reuse of software
– design/implement/test useful routines and classes
– package and make available for reuse
– saves in development cost & time
– central libraries make it possible to make a single change and propogate
• external style sheets place the style definitions in separate files
– multiple pages can link to the same style sheet, consistent look across a site
– possible to make a single change and propagate automatically
– represents the ultimate in content/representation separation


Web rules of thumb
• HTML provides for lots of neat features,
but just because you can add a feature doesn't mean you should!
– don't add features that distract from the content of the page
? use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts
? use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of buttons or links can slow access
? don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained
? don’t be annoying
e.g., no pop-up windows, excessive advertising, silly music
? break large document into smaller or provide a menu (either internal or frame)
? stick to standard features and test using both IE and Netscape
? utilize style sheets to make changes easy & ensure consistency