Reintroducing Web Technology

Reintroducing to Web Technology

Isriya Paireepairit

Agenda• HTTP

• XML

• HTML/XHTML

• CSS

• JavaScript

• DOM

• SVG

• Unicode

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

HTTP role in Internet Protocol

• TCP/IP Stack pic

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

Technologies on top of HTTP

• XML-RPC

• XMLHttpRequest (used in AJAX)

• SOAP

• Web Service

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

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

XML Correctness

• 2 States

• Well-formed

• Correct in term of XML syntax rules

• Validate

• Logically correct with XML schema

HTML

• HyperText Markup Language

• The language that describes “Web Page”

• Simply text file, human readable

• Latest version is HTML 4.0

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)

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

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

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

DOM

• Document Object Model

• W3C Standard

• A “method”, not implementation

• Tell us how objects in page are related to each other

• Using Tree diagram

DOM Demo

• Using Mozilla DOM Inspector

• Very useful for web developers

What is DHTML?

• “Dynamic HTML”

• Technic that makes web interactive

• Not technology itself, just set of existing technology

• Including HTML, CSS, DOM, JavaScript

SVG

• Scalable Vector Graphics

• XML-based vector graphics format

• Compete with Macromedia Flash

• Can do animation

• Browser support is rapidly growing

SVG Demo

• Mozilla SVG Tiger

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

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>