web information system design no.4 foundation of web...

22
Web Information System Design No.4 Foundation of Web Documents Tatsuya Hagino ([email protected]) 1

Upload: others

Post on 08-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Web Information System Design

No.4 Foundation of Web Documents

Tatsuya Hagino ([email protected])

1

Page 2: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Web Architecture

2

Architecture (definition from Longman) 1. the style and design of a building or buildings

2. the art and practice of planning and designing buildings

3. the structure of something

4. the structure of a computer system and the way it works

Web Architecture the structure of Web

the fundamental principles of Web

to keep compatibility of Web

to answer questions about Web

Architecture of the World Wide Web, Volume One http://www.w3.org/TR/webarch (15 December 2004)

Page 3: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Web Structure

3

HTML

XML

HTTP

URI

Unicode

Documents Data

Manipulation

Page 4: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Web Architecture Principles

for Web Documents

4

Versioning A data format specification SHOULD provide for version information.

An XML format specification SHOULD include information about change policies for XML namespaces.

Extensibility A specification SHOULD provide mechanisms that allow any party to create extensions.

Extensibility MUST NOT interfere with conformance to the original specification.

A specification SHOULD specify agent behavior in the face of unrecognized extensions.

Separation of Content, Presentation, and Interaction A specification SHOULD allow authors to separate content from both presentation and interaction

concerns.

Hypertext A specification SHOULD provide ways to identify links to other resources, including to secondary

resources (via fragment identifiers).

A specification SHOULD allow Web-wide linking, not just internal document linking.

A specification SHOULD allow content authors to use URIs without constraining them to a limited set of URI schemes.

A data format SHOULD incorporate hypertext links if hypertext is the expected user interface paradigm.

Page 5: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

What is XML?

5

XML (Extensible Markup Language) Specification for defining a markup language

The first version (1.0) was created by W3C in 1998

Currently two version: 1.0 and 1.1

Design goals for XML: 1. XML shall be straightforwardly usable over the Internet.

2. XML shall support a wide variety of applications.

3. XML shall be compatible with SGML.

4. It shall be easy to write programs which process XML documents.

5. The number of optional features in XML is to be kept to the absolute minimum, ideally zero.

6. XML documents should be human-legible and reasonably clear.

7. The XML design should be prepared quickly.

8. The design of XML shall be formal and concise.

9. XML documents shall be easy to create.

10. Terseness in XML markup is of minimal importance.

SGML

HTML

XML

XHTML Application

Define Language

Page 6: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Structured Document

6

Documents have structure:

paragraph, chapter, index, ...

CV, application forms, ...

markup

Embedded codes for specifying structure

SGML started to use tags for markup

<coffee price="250">Cafe Late</coffee>

markup start

markup end

Document

Chapter 1

Chapter 2

Section 2.1

Section 2.2

attribute

Page 7: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

XML Document

7

XML Declaration show XML document specify encoding

Element markup by start tag and end tag empty tag

CharData character data

Reference character reference: &lt;, &#65;, ...

CDSect CDATA section

PI Processing instruction

Comment

<?xml version="1.0" encoding='iso-2022-jp'?> <!-- Keio SFC Restaurant --> <restaurant> <name>Keio Restaurant</name> <place>SFC Campus</place> <menu> <item price="150">coffee</item> <item price ="250">cafe late</item> <item price="400">sandwich</item> <item price="700">spaghetti</item> </menu> <open from="10:00" to="17:00" /> <networks> <network type="Wireless LAN" /> <network type="Wired LAN" /> </networks> <misc> Have a nice break. </misc> </restaurant>

Page 8: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

An XML document consists of elements. Each element is marked up by tags:

An element may contain other elements and/or character data. Tags need to nest properly. An XML document is parsed as a single tree.

<element attribute="value">content</element> <element attribute="value" />

Element

8

restaurant

name place menu open networks misc

Keio Restaurant SFC Campus item

price

coffee

item

price

cafe late

network network Have a nice break.

Page 9: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Element and Attribute

9

Element Two elements may not overlap. = Proper nesting.

Small and capital letters are distinguished for element names.

Close tags may not be omitted.

<empty /> is a short hand for <empty></empty>

Attribute Small and capital letters are distinguished for element names.

Each attribute needs to have value quoted by ' or ".

The same attributed cannot be specified twice for an element.

The order of attributes does not matter.

<P Class=error compat class=left>Error <p>Next paragraph

<p class="error left" compat="compat">Error</p> <p>Next paragraph</p>

Page 10: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

CDATA Section

10

`<' is hard to write as it is in XML.

Use in Javascript

<h1 class='abc'>Header</h1>

&lt;h1 class=&quot;abc&quot;&gt;Header&let;/h1&gt;

<![CDATA[<h1 class='abc'>Header</h1>]]>

Using character reference

Using CDATA section

<script type="text/javascript"> //<!-- for (i = 0; i < 10; i++) document.write(i); //--></script>

<script type="text/javascript"> <![CDATA[ for (i = 0; i < 10; i++) document.write(i); ]]></script>

Page 11: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Two Kind of XML Documents

11

Well-formed XML Tags are properly nested. Attributes are specified according to the rule. Other conditions are met.

Valid XML Well-formed, and Matches with the specified document type.

Why well-formed XML? Document type (DTD) is hard to create. Obeying DTD is hard. Extend beyond given DTD Allow data without DTD Well-formed XML can be parsed.

Well-formed XML

Valid XML

DTD DTD

DTD

Page 12: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

What is DTD?

12

Document Type Definition Specify XML document structure.

Specify content of each element.

Specify context of each element.

Specify attributes and their type.

DTD defines a set of documents. HTML is the set of XML documents defined by HTML DTD.

DTD defines an XML application.

<!ELEMENT html (head,body)> <!ELEMENT head (title|base|script|style|meta|link)*> <!ELEMENT title (#PCDATA)> <!ATTLIST title id ID #IMPLIED lang NMTOKEN #IMPLIED dir (ltr|rtl) #IMPLIED> <!ELEMENT base EMPTY> <!ATTLIST base href CDATA #REQUIRED id ID #IMPLIED>

Page 13: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

How to specify DTD

13

<?xml version="1.0"> <!DOCTYPE example SYSTEM "example.dtd"> <example> <title>This is an example.</title> <date>2014 April 28th</date> </example>

<?xml version="1.0"> <!DOCTYPE example SYSTEM [ <!ELEMENT example (title,date)> <!ELEMENT title (#PCDATA)> <!ELEMENT date (#PCDATA)> ]> <example> <title>This is an example.</title> <date>2014 April 28th</date> </example>

<!DOCTYPE html PUCLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Specify inside the document

Specify as a separate file

Use public identifier

Page 14: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Create Your Own XML

14

Create and write an XML for personal information (name, address, phone, etc.)

<?xml version="1.0"?> <person> <name> <givenName>Tatsuya</givenName> <familyName>Hagino</familyName> <middleName></middleName> <nickName>Haggi</nickName> </name> <adress>Kanagawa</address> <email>[email protected]</email> <tel kind="office">0466-49-3446</tel> <tel kind="mobile">090-3060-3465</tel> </person>

Page 15: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Write DTD for Personal Information

15

<!ELEMENT person (name,address,email*,tel*)> <!ELEMENT name (givenName,familiyName,middleName?,nickName?)> <!ELEMENT givenName (#PCDATA)> ....

Page 16: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

XML Namespace

16

Background XML is used for various areas. Combine multiple XML documents at the same time. Need to avoid overlap of XML element names and attribute names.

Specification Namespaces in XML 1.0 (Third Edition)

W3C Recommendation 2009/12/8

Namespaces in XML 1.1 (Second Edition) W3C Recommendation 2006/8/16

Basic concepts Use qualified names (QNames)

(namespace prefix) : (local part)

Prefix refers to URI (IRI). Prefixes are expanded to URI and names are compared. If the expanded URIs are the same, names are the same even if prefixes are

different.

Page 17: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Name Space Declaration

17

Declaration Use xmlns attribute.

Bind prefix to URI.

Use for element names

Use for attribute names

<x xmlns:edi='http://ecommerce.org/schema'>

<!-- prefix edi is bound to http://ecommerce.org/schema

in element x and its content --> </x>

<x xmlns:edi='http://ecommerce.org/schema'>

<edi:price units='yen'>3218</edi:price>

</x>

<x xmlns:edi='http://ecommerce.org/schema'>

<lineItem edi:taxClass="free">Baby food</lineItem>

</x>

Page 18: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Scope of Namespace

18

The scope of namespace declaration is inside the element.

Multiple namespaces can be declared at the same time.

<?xml version="1.0"?>

<html:html xmlns:html='http://www.w3.org/TR/REC-html40'>

<html:head><html:title>Frobnostication</html:title></html:head>

<html:body>

<html:p>Moved to <html:a href='http://frob.com'>here.</html:a>

</html:p>

</html:body>

</html:html>

<?xml version="1.0"?>

<bk:book xmlns:bk='urn:loc.gov:books'

xmlns:isbn='urn:ISBN:0-395-36341-6'>

<bk:title>Cheaper by the Dozen</bk:title>

<isbn:number>1568491379</isbn:number>

</bk:book>

Page 19: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Namespace Defaulting

19

Default namespace No need to write prefixes every time. Default namespace applies to elements. Default namespace does not apply to attributes.

<?xml version="1.0"?>

<html xmlns='http://www.w3.org/TR/REC-html40'>

<head><title>SFC Home Page</title></head>

<body>

<p>SFC is one of the campus of

<a href='http://www.keio.ac.jp/'>Keio university</a>.</p>

</body>

</html>

<?xml version="1.0"?>

<book xmlns='urn:loc.gov:books'

xmlns:isbn='urn:ISBN:0-395-36341-6'>

<title>Encouragement of Learning</title>

<isbn:number>9784003310236</isbn:number>

</book>

<?xml version="1.0"?>

<book xmlns='urn:loc.gov:books'

xmlns:isbn='urn:ISBN:0-395-36341-6'>

<title>Encouragement of Learning</title>

<isbn:number>9784003310236</isbn:number>

<notes>

<p xmlns='urn:w3-org-ns:HTML'>

Students <em>must</em> read this book.

</p>

</notes>

</book>

Mixing with default

Page 20: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Schedule XML

20

Create and write an XML for schedule (meetings, classes)

<?xml version="1.0"> <schedule> <date>2014/4/29</date> <time>19:00</time> <place>i506</place> <issue>meeting</issue> </schedule>

Page 21: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Mix Personal Information and Schedule

21

Write an XML schedule of meeting a person whose information is written by your personal information XML. schedule namespace: http://example.org/schedule

personal information namespace: http://example.org/personalInfo

<?xml version="1.0"> <schedule xmlns="http://example.org/schedule" xmlns:pi="http://example.org/personalInfo"> <date>2014/4/29</date> <time>19:00</time> <place>i506</place> <issue>meeting</issue> <pi:person> <pi:name><pi:giveName>Tatsuya</pi:givenName></pi:name> </pi:person> </schedule>

Page 22: Web Information System Design No.4 Foundation of Web ...web.sfc.keio.ac.jp/~hagino/dis15/04-english.pdfWeb Architecture 2 Architecture (definition from Longman) 1. the style and design

Summary

22

Web Architecture

Principles of Web documents

XML

XML Namespace