Reintroducing Web Technology

Slide 1: Reintroducing to Web Technology Isriya Paireepairit

Slide 2: Agenda • HTTP • XML • HTML/XHTML • CSS • JavaScript • DOM • SVG • Unicode

Slide 3: HTTP • “HyperText Transfer Protocol” • Latest version: 1.1 • Familiar terms for web developers • GET, POST, 404 • Encrypted version called HTTPS vis SSL (now TLS) • Port 80

Slide 4: HTTP role in Internet Protocol • TCP/IP Stack pic

Slide 5: HTTP Advantage • All browsers support HTTP 1.1 • Other protocol can be blocked via Firewall • SMTP, POP3, IMAP, IRC, NNTP, BitTorrent • So that all web frameworks are built on HTTP • We will cover this again in AJAX topic

Slide 6: Technologies on top of HTTP • XML-RPC • XMLHttpRequest (used in AJAX) • SOAP • Web Service

Slide 7: XML • “Extensible Markup Language” • Latest version is 1.1 • Simplified version of SGML • De Facto format for data exchange via web • Simply text file, with HTML-like syntax • Tag scheme is definable by users

Slide 8: XML schema • The document for checking XML syntax • There are big 3 • DTD - oldest, not in XML format • XML Schema (or XSD) - designed to replace DTD, XMLed but too complex • RELAX NG - newest, reduce complication

Slide 9: XML Correctness • 2 States • Well-formed • Correct in term of XML syntax rules • Validate • Logically correct with XML schema

Slide 10: HTML • HyperText Markup Language • The language that describes “Web Page” • Simply text file, human readable • Latest version is HTML 4.0

Slide 11: XHTML • XHTML is XMLified HTML • or “HTML in XML format” • XHTML 1.0 is very similar to HTML 4.0 • XHTML has all XML properties (e.g. well- formed, valid)

Slide 12: XHTML Version • XHTML 1.0 • Transitional - allow deprecated elements • <center> <u> <strike> • Strict - deprecated are not allow • Use CSS instead for presentation • XHTML 1.1 • Modularized XHTML 1.0 Strict

Slide 13: CSS • Cascading Style Sheet • Simply text file to describe XML/HTML presentation • Separate “style” from “content” • 3 levels: CSS1, CSS2, CSS3 • There is no browser support full CSS2 • IE has many problem with CSS1

Slide 14: JavaScript • A programming language • Formal name is “ECMA Script” • Interpreting (or scripting) not compiling • Not related with Java (only name) • De Facto script for web • Latest version is 1.5, but 1.0 is enough • IE6 supports only JavaScript 1.0

Slide 15: DOM • Document Object Model • W3C Standard • A “method”, not implementation • Tell us how objects in page are related to each other • Using Tree diagram

Slide 16: DOM Demo • Using Mozilla DOM Inspector • Very useful for web developers

Slide 17: What is DHTML? • “Dynamic HTML” • Technic that makes web interactive • Not technology itself, just set of existing technology • Including HTML, CSS, DOM, JavaScript

Slide 18: SVG • Scalable Vector Graphics • XML-based vector graphics format • Compete with Macromedia Flash • Can do animation • Browser support is rapidly growing

Slide 19: SVG Demo • Mozilla SVG Tiger

Slide 20: Unicode • Unicode is universal character encoding • Unicode has some mode, UTF-8 is most popular • Each Thai character uses 3 bytes in UTF-8 • Compare with 1 byte in TIS-620 • Anyway, Unicode is recommended for new web

Slide 21: Canvas • Another HTML extension from Apple • De Facto • Intend to render scriptable bitmap image • Used in Mac OS X Dashboard • Currently supported by Mozilla and KDE • Use by <canvas>