PENGANTAR TEKNOLOGI WEB 3

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

Pengembangan sisi client











Pilihan client

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

HTML tag










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
• enclose the title of a page
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
HTML document is a collection of elements (text/media with context)

HTML

Aligning text


Text Styles


Font





Lists

Tabel 1 baris 2 kolom



Tabel 2 baris 2 kolom



URL




Hireling


Hyperlinks - Anchor




Images



Frames





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

Menu Frame




Content vs. presentation
• most HTML tags define content type, independent of presentation
– exceptions?
• style sheets associate presentation formats with HTML elements
– CSS1: developed in 1996 by W3C
– CSS2: released in 1998, but not fully supported by browsers
– HTML style sheets are known as Cascading Style Sheets, since can be defined at three different levels
1. inline style sheets apply to the content of a single HTML element
2. document style sheets apply to the whole BODY of a document
3. external style sheets can be linked and applied to numerous documents
lower-level style sheets can override higher-level style sheets






Inline style sheets (cont.)


Document Style Sheets




Document Style Sheets


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


Modularity & style sheets


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