sheet 1xml technology in e-commerce 2001lecture 1 xml technology in e-commerce lecture 1 www, html,...
TRANSCRIPT
Sheet 1XML Technology in E-Commerce 2001 Lecture 1
XML Technology in E-Commerce
Lecture 1
WWW, HTML, CSS, XML, Meta-modeling
Sheet 2XML Technology in E-Commerce 2001 Lecture 1
Lecture Outline
• World Wide Web - facts, architecture;
• HTML;
• CSS;
• XML– Markups;– Well-formedness;– Meta-modeling;
Sheet 3XML Technology in E-Commerce 2001 Lecture 1
• WWW– Global hypertext project at CERN;– Proposed by Tim Berners-Lee in 1989;
• Web Consortium (W3C) - www.w3.org– Founded in 1994;– Three hosts - MIT, INRIA, Keio University;– Leads the evolution of the Web;– More than 20 web-related specifications;
World Wide Web
Sheet 4XML Technology in E-Commerce 2001 Lecture 1
World Wide WebArchitecture
Web Server
Web Browser
HTTP request for Web Resource
HTTP response - usually a Web page
• HTTP - Hypertext Transport Protocol;
• HTML - Hypertext Markup Language;
• URI - Uniform Resource Identifier - a naming scheme for resources on the Web;
Sheet 5XML Technology in E-Commerce 2001 Lecture 1
HTMLExample
<html>
<head>
<title> XML Technology in E-Commerce</title>
</head>
<body>
<h1>Lecture 1</h1>
<p> Example of HTML</P>
<p> Resources: <a href=“http://www.w3.org”> W3C </a> Web Consortium</p>
</body>
</html>
Other Examples - Deitel 2.4, page 26; 3.2, page 47
Sheet 6XML Technology in E-Commerce 2001 Lecture 1
• Enable development of web applications - user interface is presented by the browser;
• Web server handles form data through server extensions;
• Opens a possibility for dynamic web pages;
• CGI (Common Gateway Interface) - protocol for data exchange between the server and its extensions (CGI scripts);
• Popular languages for CGI programming - Perl, C, Python, Java, VBScript, JavaScript;
HTMLForms
Examples - Deitel 3.4, page 52
Sheet 7XML Technology in E-Commerce 2001 Lecture 1
HTMLLinks
Web page
Web Resource
• Link has two ends (anchors) and direction;• A element - sets up an anchor:
– <a href=“http://java.sun.com”>Java Home</a> sets up a source anchor. href attribute contains an URI;
– <a name=“dest”> TOC </a> - sets up a destination anchor;
• Link behavior - destination resource is retrieved and displayed;
Sheet 8XML Technology in E-Commerce 2001 Lecture 1
• Meta data about the document:
<meta name=“author” content=“John Smith”>
<meta name=“address” content=“an address”>
• HTTP response headers:
<meta http-equiv=“refresh” content=“1000;
http://www.foo.com”>
• Data for search agents:
<meta name=“keywords” content=“XML, WEB”>
HTML<meta> tags usage
Sheet 9XML Technology in E-Commerce 2001 Lecture 1
• Multimedia content - plug-in and ActiveX technology;
• Scripts - dynamic and interactive web pages on the
client side;
• Java Applets - programs executed in the browser
environment;
• HTML editors - FrontPage, Dreamweaver, NetObjects
Fusion, Adobe GoLive;
Demo: Editing web pages with FrontPage
HTMLMultimedia, extra functionality, editors
Sheet 10XML Technology in E-Commerce 2001 Lecture 1
CSSCascading Style Sheets
• Purpose - specify the layout of web pages;• Benefits:
– Separate structure from presentation;
– Impose consistent look and feel to the entire site;
– Promotes reusability;
• Specifications:– CSS level 1 and 2;
– CSS level 3 - work in progress;
Sheet 11XML Technology in E-Commerce 2001 Lecture 1
• Inline styles<p style=“font-size: 20 pt; color: blue”> some text </p>
• style element<style type=“text/css”>
p {font-size : 20pt; color : blue;}
</style>
• External style sheets<head> <link rel=“stylesheet” type=“text/css”
href=“aStyle.css”></head>
CSSDeclaration
Sheet 12XML Technology in E-Commerce 2001 Lecture 1
• Style origin:– User agent (browser) default style sheet;
– User style;
– Author style;
• Cascading order - how to resolve conflicts between style rules;
• Inheritance - an element inherits style properties
from its ancestors;
CSSCascading and Inheritance
More info - Deitel 4.4, page 84
Sheet 13XML Technology in E-Commerce 2001 Lecture 1
XMLXML, HTML, SGML
HTML Drawbacks:
• Fixed Tags Set
• Poor Linking
• Does not support validation
• Simple structures
• Specifies only presentation
Relations between SGML, HTML and XML:
Sheet 14XML Technology in E-Commerce 2001 Lecture 1
XMLIdea
Sherlock Holmes
Baker Street 221b
London
England
<name> </name>
<street> </street>
<city> </city>
<country> </country>
<address>
</address>
Sheet 15XML Technology in E-Commerce 2001 Lecture 1
XMLBasic terms
Annotated XML Specification: http://www.xml.com/axml/testaxml.htm
Sheet 16XML Technology in E-Commerce 2001 Lecture 1
• Characters in the XML document form markups and character data;
• Markups:
– start, end and empty element tags;
– entity and character references;
– comments;
– CDATA delimiters;
– Document type declarations;
– Processing Instructions;
• All other characters form character data;
XMLCharacters and Markups
Sheet 17XML Technology in E-Commerce 2001 Lecture 1
<name attr1=“value1” >……..Content………..</name>
XMLElements and element’s content
Start tag End tagElement’s content
Element’s content:
• Only elements;
• Empty;
• Mixed (character data and other elements);
<img src=“anImage.gif” /> - Empty element
Attribute specification
Sheet 18XML Technology in E-Commerce 2001 Lecture 1
<person age=“45”>
<name>Sherlock Holmes</name>
<address>
<street>Baker Street 221b</street>
<zip>1111</zip>
<city>London</city>
<country>England</country>
</address>
<homepage href=“http://www.sherlock-holmes.co.uk/”/>
<note><em>Sherlock Holmes</em> and <em>Doctor Watson</em> lived at 221b Baker Street between 1881-1904, according to the stories written by <em>Sir Arthur Conan Doyle</em>.</note>
</person>
XMLExample
Sheet 19XML Technology in E-Commerce 2001 Lecture 1
• Processing Instructions:<?xml:stylesheet type="text/css" href="bach.css"?>
<?cocoon-process type="xslt"?>
• CDATA Sections:<![CDATA[ <H1> Hello World! </H1> ]]>
<![CDATA[
if((x==0) && (y <2)) System.out.println(“Ok!”);
]]>
XMLProcessing Instructions and CDATA Sections
Sheet 20XML Technology in E-Commerce 2001 Lecture 1
• Purpose - resolve name collisions in a single XML document;
• Definition - Set of names uniquely identified by URI, used for element types and attribute names;
• Namespace declaration:<html:html xmlns:html=“http://www.w3.org/TR/REC-html40”>
<html:head>……….</html:head>
<html:body>……….</html:body>
</html:html>
XMLNamespaces
Examples - Deitel 5.8, page 123
Sheet 21XML Technology in E-Commerce 2001 Lecture 1
XML Meta-modelling - well-formedness
EBNF
Pascal Grammar
a Pascal Program
Defines
Defines
EBNF
XML GrammarWF Constraints
an XML Document
Defines
Defines
Sheet 22XML Technology in E-Commerce 2001 Lecture 1
XML Meta-modelling - validity
Sheet 23XML Technology in E-Commerce 2001 Lecture 1
• Browser support:– Netscape - XML, CSS1, CSS2 (partly);
– IE 5 - XML, CSS1, CSS2 (partly), XSLT;
– Opera - XML, CSS1, CSS2(partly);
• XML Editors:– XML Spy 3.5;
– XMetal;
– Epic;
– FrameMaker;
Demo: Visualizing XML files in IE5, editing with XML Spy
XML Tool Support
Sheet 24XML Technology in E-Commerce 2001 Lecture 1
Summary• Today’s Web - HTTP, URI, HTML, CSS;
• XML is a technology for creating markup languages;
• XML documents contain character data and markups;
• Elements are the main building blocks for the document
structure;
• Document well-formedness means conformance to the
XML grammar and constraints;
Read: Deitel 1..5, Well-formedness and Validity of XML Documents
Skip: Deitel 3.3, 3.5, 3.7, 3.9, 3.10, 4.6 .. 4.10;
Assignment: Deitel Ex 5.4 and Ex 5.7, pages 132, 133