1

Open Standards for Open Standards for WebWeb

Standards in real worldStandards in real worldElectrical Plugs (and voltage!)Electrical Plugs (and voltage!)�� electronic devices electronic devices

need standardized need standardized access to electrical access to electrical power.power.

2

Standards in real worldStandards in real world�� AudioAudio--Video cables Video cables are standardizedare standardized

Standards in real worldStandards in real world�� Almost all external Almost all external computing devices computing devices are now USBare now USB

3

Standards in Real World Standards in Real World --Bottle CapsBottle Caps�� You get the point...You get the point...

Who Creates Standards for Virtual World?Who Creates Standards for Virtual World?�� Strictly speaking, an official standard is only produced by an Strictly speaking, an official standard is only produced by an officially recognized standards organization, such as ISO, ANSI,officially recognized standards organization, such as ISO, ANSI,NEMA, JIS, ...NEMA, JIS, ...�� IETF, IEEE, W3C, OASIS, OGC, IETF, IEEE, W3C, OASIS, OGC, BluBlu--ray Disc Association (BDA) ray Disc Association (BDA) etc. are industry consortia, where groups of companies and etc. are industry consortia, where groups of companies and individuals get together to produce an industry standard. Indusindividuals get together to produce an industry standard. Industry try consortia may produce either consortia may produce either openopen or or closedclosed standards.standards.�� People, companies, or software projects) may publish a People, companies, or software projects) may publish a specification that is specification that is openopen and free to use. This is called an open and free to use. This is called an open standard.standard.�� Companies may license a specification and charge royalties for iCompanies may license a specification and charge royalties for its ts use. This is called a use. This is called a closedclosed standard.standard.

4

What makes a standard What makes a standard ““OpenOpen””??�� AvailableAvailable –– Anyone is allowed to read and Anyone is allowed to read and implement the standard.implement the standard.�� No RoyaltiesNo Royalties –– Free to implement without paying Free to implement without paying hefty licensing fees or royalties.hefty licensing fees or royalties.�� Not controlled by a single vendor Not controlled by a single vendor --Maximizes endMaximizes end--user choice and makes the market user choice and makes the market more competitive with no lockmore competitive with no lock--in to a single vendor's in to a single vendor's implementation.implementation.

The World Wide Web Consortium (W3C), one of the most influentialorganizations setting Web standards, releases technical specifications, recommendations for the Web infrastructure. Several other organizations also contribute Web standards, such as:

* the International Organization for Standardization,* the Internet Engineering Task Force,* European Computer Manufacturers Association,* the Unicode Consortium,* the Open Geospatial Consortium,* and many others.

Who Decides What the Web Standards Are?Who Decides What the Web Standards Are?

5

There are various reasons why not all sites are standards-compliant.

Sometimes Web authors:

* create pages that have mistakes in them* do not know how to create sites that meet the standards* use software tools that do not create standards-compliant code* write code that include features that exist in only one browser.

Why are all Web sites not standardsWhy are all Web sites not standards --compliant?compliant?

Web Browser WarsWeb Browser Wars�� Major Web Browsers during the late 1990's:Major Web Browsers during the late 1990's:-- Microsoft Internet Explorer (IE)Microsoft Internet Explorer (IE)-- Netscape NavigatorNetscape Navigator�� Each web page had to be written twice or contain hacks Each web page had to be written twice or contain hacks

for each browser since neither would display the same for each browser since neither would display the same page identically.page identically.�� Situation improving... Situation improving... MozillaMozilla FirefoxFirefox and IE7 are much and IE7 are much better at complying with web standards.better at complying with web standards.

6

To be standards-compliant means that your Web site is built following the published and relevant Web standards specifications. You can determine if your site's pages are compliant by checking them with a piece of software called a validator. A validator is a bit like a spell checker, except it tells you whether or not your HTML is correct and follows the rules set out in the standard.

W3C HTML Validator � http://validator.w3.org/

W3C CSS Validator � http://jigsaw.w3.org/css-validator/

How do I know when my site is standardsHow do I know when my site is standards --compliant?compliant?

1: Web Standards 1: Web Standards Improve AccessibilityImprove Accessibility

Because Web standards incorporate and support accessibility Because Web standards incorporate and support accessibility compliance, a standardscompliance, a standards--compliant Web site is one step closer to compliant Web site is one step closer to accessibility compliance. accessibility compliance.

2. Web Standards Provide 2. Web Standards Provide Device IndependenceDevice Independence

By employing the most recent standards for CSS, you can make it By employing the most recent standards for CSS, you can make it possible for your Web page content to be accessed by different possible for your Web page content to be accessed by different browsers (browsers (FireFoxFireFox, IE) and devices (cell phones, PDA, PC). , IE) and devices (cell phones, PDA, PC).

7

3. Web Standards Result in 3. Web Standards Result in FasterFaster Page LoadsPage Loads

The standardsThe standards--compliant code lowers the file size of Web pages compliant code lowers the file size of Web pages (also called page weight), resulting in pages that load faster, (also called page weight), resulting in pages that load faster, giving giving your users a better experience.your users a better experience.

You can lower bandwidth costs by reducing any unnecessary You can lower bandwidth costs by reducing any unnecessary information your Web site sends to your audience. Studies have information your Web site sends to your audience. Studies have shown that using modern, standardsshown that using modern, standards--based design methods can based design methods can reduce the weight of a site by 25% to 50%.reduce the weight of a site by 25% to 50%.

4. Web Standards affords 4. Web Standards affords Lower Bandwidth Usage Lower Bandwidth Usage

5.5. Web Standards enables Web Standards enables Ease of MaintenanceEase of Maintenance

The separation of structure and presentation encouraged by The separation of structure and presentation encouraged by standards allows sitestandards allows site--wide changes to be made by editing a single wide changes to be made by editing a single style sheet. style sheet.

With a standardsWith a standards--compliant site, any Web author or vendor with compliant site, any Web author or vendor with access to the standards specifications should be able to step inaccess to the standards specifications should be able to step inwithout having to unravel nonwithout having to unravel non--standard code introduced by standard code introduced by previous authors.previous authors.

6.6. Choice of Choice of Vendor and Content DeveloperVendor and Content Developer

8

Most commonlyMost commonly --used Web standardsused Web standards

HTML, XHTML and CSS are three of the most widely-used standards on the Web today.

• HTML (HyperText Mark-up Language)HTML is a simple mark-up language used to create hypertext documents that are can be read on any computer.

•• XHTML (eXtensible HyperText Markup Language)XHTML is a reformulation of HTML so that it conforms to the rules of XML. This means that XHTML is very similar to HTML, except for slightdifferences in the markup, but it is now a sub-set of XML.

•• CSS (Cascading Style Sheets)Cascading Style Sheets are declarations that describe how a document should be presented on the Web. CSS can be written for different media, can be part of an HTML document, or can be a separate file that is applied to multiple HTML documents.

What You Should Already KnowWhat You Should Already Know• HTML HTML and the basics of building web pages

<html><html><head><head><title>This is bad HTML</title><title>This is bad HTML</title><body><body><h1>Bad HTML<h1>Bad HTML</body></body>

* XHTML stands for EXtensible HyperText Markup Language

* XHTML is aimed to replace HTML

* XHTML is almost identical to HTML 4.01

* XHTML is a stricter and cleaner version of HTML

* XHTML is HTML defined as an XML application

* XHTML is a W3C Recommendation

What Is XHTML?What Is XHTML?

9

The Most Important DifferencesThe Most Important DifferencesHTML Vs XHTMLHTML Vs XHTML

• HTML HTML and the basics of building web pages

••XHTML elements must be XHTML elements must be properly nestedproperly nested

<<ulul> >

<<lili>Coffee</>Coffee</lili> >

<<lili>Tea <>Tea <ulul> >

<<lili>Black tea</>Black tea</lili> >

<<lili>Green tea</>Green tea</lili> >

</</ulul> >

</</lili> >

<<lili>Milk</>Milk</lili> >

</</ulul> >

<<ulul>>

<<lili>Coffee</>Coffee</lili>>

<<lili>Tea>Tea

<<ulul>>

<<lili>Black tea</>Black tea</lili>>

<<lili>Green tea</>Green tea</lili>>

</</ulul><><lili>Milk</>Milk</lili>>

</</ulul>>

RightRightWrongWrong

The Most Important DifferencesThe Most Important Differences

••XHTML elements must always be XHTML elements must always be closedclosed

<p>This is a paragraph</p> <p>This is a paragraph</p> <p>This is another <p>This is another paragraph</p> paragraph</p>

<p>This is a paragraph<p>This is a paragraph

<p>This is another <p>This is another paragraphparagraph

RightRightWrongWrong

10

The Most Important DifferencesThe Most Important Differences

••XHTML elements must be in XHTML elements must be in lowercaselowercase

<html><html>

<head> ... </head><head> ... </head>

<body> ... </body><body> ... </body>

</html></html>

<HTML><HTML>

<HEAD> ... </HEAD><HEAD> ... </HEAD>

<BODY> ... <BODY> ...

</HTML></HTML>

RightRightWrongWrong

About CSSAbout CSS�� Cascading Style SheetCascading Style Sheet�� ““ style sheetstyle sheet”” is used for layout definition is used for layout definition of HTML contentsof HTML contents�� CSS is a standard proposed by CSS is a standard proposed by W3C(World Wide Web Consortium) W3C(World Wide Web Consortium) �� Present Version is 2.0 and referred to as Present Version is 2.0 and referred to as CSS2CSS2

11

CSS Simple example CSS Simple example ……11�� If you want to highIf you want to high--light newly added contents light newly added contents on 100 HTML document with highon 100 HTML document with high--lighted lighted (color) text (color) text ““NEWNEW””�� You will need to include the following HTML You will need to include the following HTML tag in 100 pagestag in 100 pages

<font color=<font color=““ redred”” >New</font>>New</font>

HTML+CSSHTML+CSS�� HTMLHTML�� <span class=<span class=““attentionattention””>New</span>>New</span>

�� CSSCSS��separate fileseparate file���� .attention.attention�� color: redcolor: red

Changing color in a single CSS file will result inchanging the color of class “attention” in all 100 HTML documents

“attention �can be any name�” class can bepre-defined in the HTML document

12

The XML FamilyThe XML FamilyXML (eXtensible Markup Language), a standard that is the core of a large family of related technologies.

• XSL (eXtensible Stylesheet Language) - describes how XML documents should display. Also facilitates the transformation of XML documents into other formats

• RSS (“Really Simple Syndication”, “RDF Site Summary” or “Ri ch Site Summary”) — a popular set of formats for syndicating news and Web sites..

• SVG (Scalable Vector Graphics ) and SMIL (Synchronized Multimedia Integration Language) — multimedia and graphics standards. Using SVG animation can be equivalent to Flash; however it is accessible and better structured. SMIL is a language that allows you to combine audio, video, images, and text to build multimedia presentations.

Difference between XML and HTMLDifference between XML and HTML

XML was designed to carry data, not displaying dataXML was designed to carry data, not displaying data XML is not a replacement for HTML.XML is not a replacement for HTML. Different goals:Different goals:XML XML was designed towas designed to describe describe data and to focus on data and to focus on what data iswhat data is..HTMLHTML was designed towas designed to displaydisplay data and to focus on data and to focus on how data lookshow data looks.. HTML is about displaying information, XML is about describing HTML is about displaying information, XML is about describing information.information.

13

PurposePurpose Used to create special-purpose markup languages Facilitates sharing of structured text and information across the Internet (man-machine, machine-machine).

Why Is XML Important? Why Is XML Important? �� Plain Text Plain Text �� Easy to editEasy to edit�� Useful for storing small amounts of data Useful for storing small amounts of data �� Possible to efficiently store large amounts of XML Possible to efficiently store large amounts of XML data through an XML front end to a databasedata through an XML front end to a database�� Data Identification Data Identification �� Tell you what kind of data you haveTell you what kind of data you have�� Can be used in different ways by different Can be used in different ways by different applications applications

14

Content objects in a bookContent objects in a book

BookBookFrontMatterFrontMatter

BookTitleBookTitleAuthor(s)Author(s)PubInfoPubInfo

Chapter(s)Chapter(s)ChapterTitleChapterTitleParagraph(s)Paragraph(s)

BackMatterBackMatterReferencesReferencesIndexIndex

Ordered hierarchies of content Ordered hierarchies of content objectsobjects�� Premise: A text is the sum of its component partsPremise: A text is the sum of its component parts�� A A <Book><Book> could be defined as containing:could be defined as containing:

<<FrontMatterFrontMatter>>, , <Chapter><Chapter>s, s, <<BackMatterBackMatter>>�� <<FrontMatterFrontMatter>> could contain:could contain:<<BookTitleBookTitle>> <Author><Author>s s <<PubInfoPubInfo>>�� A A <Chapter><Chapter> could contain:could contain:<<ChapterTitleChapterTitle>> <Paragraph><Paragraph>ss�� A A <Paragraph><Paragraph> could contain:could contain:<Sentence><Sentence>s or s or <Table><Table>s or s or <Figure><Figure>s s ���� Components chosen should reflect anticipated Components chosen should reflect anticipated

useuse

15

XML authoring toolsXML authoring tools

Standard Office ToolsStandard Office Tools�� Microsoft Office XPMicrosoft Office XP�� OpenOfficeOpenOffice Plain Text EditorsPlain Text Editors

What is RSS?What is RSS?� Put simply RSS is a format for easily sharing content on the web. What type of content? Commonly things such as news items, job adverts, or marketing communications are ideal candidates for RSS although almost any list orientated information can be suitable. � RSS can stand for 'Rich Site Summary ', 'RDF Site Summary ' or 'Really Simple Syndication ' depending on who you ask and which version they are speaking about.

16

What does an RSS File look like?What does an RSS File look like?

What does an RSS File look like?What does an RSS File look like?The information enclosed between the <channel> tags is used to describe the feed itself. The code snippet below illustrates a typical channel description.

<channel><title>Nikkei News-Technology</title><link>http://www.nni.nikkei.co.jp/</link><description> ����� �� ����������� ����� ��� </description></channel>

Each item in the RSS feed is described between <item> tags and at the most basic level these include title, links and descriptions as illustrated below.

<item> <title>Hitachi Unit, Cancer Center To Devise Cancer Diagnostic System</title> <link>http://www.nni.nikkei.co.jp/CF/FR/GATEWAY/rss_news.cfm?URL=/AC/TNKS/Nni20070607D07JFA06.htm&amp;Check=1</link> <pubDate>Fri, 8 Jun 2007 02:20:30 +0900</pubDate> </item>

17

Nikkei News RSS FeedNikkei News RSS Feed

RSS Subscription PageRSS Subscription Page

18

RSS Subscription PageRSS Subscription Page

What Is SVG?What Is SVG?

Scalable Vector Graphics (SVG) is W3C's non-proprie tary alternative to Flash and bitmapped graphics.

SVG enables 2-D resolution- and media-independent gr aphics in a text-based format.

This permits integration with XHTML and other W3 specifications…

…including complete support for CSS, scripting, and animation.

Object Types : Vector graphic shapes (paths consisting of straight lines and curves), Text, and Images.

19

What Is SVG?What Is SVG?

• Because SVG is XML text, images can be generated on the fly fromdatabases and applications. Text in SVG is fully searchable and selectable, as well as accessible.

• Integrates well with server-side technology.

• Objects can be grouped, styled, transformed, and reused.

• Vendor support: Adobe, Canon, Corel,, Hewlett Packard,, KDDI, Nokia,, Sharp, Sun Microsystems, Texas Instruments, and others

ExampleExample<!DOCTYPE <!DOCTYPE svgsvg PUBLIC "PUBLIC " -- //W3C//DTD SVG 1.1//EN" //W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

">">

<<svgsvg width="100%" height="100%" version="1.1"width="100%" height="100%" version="1.1"xmlnsxmlns ="http://www.w3.org/2000/svg">="http://www.w3.org/2000/svg">

<<rectrect width="300" height="100"width="300" height="100"style="fill:rgb(0,0,255);strokestyle="fill:rgb(0,0,255);stroke -- width:1;width:1;stroke:rgb(0,0,0)"/>stroke:rgb(0,0,0)"/>

</</ svgsvg >>

20

ExampleExample<?xml version="1.0" standalone="no"?><?xml version="1.0" standalone="no"?><!DOCTYPE <!DOCTYPE svgsvg PUBLIC "PUBLIC " -- //W3C//DTD SVG 1.1//EN" //W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<<svgsvg width="100%" height="100%" version="1.1"width="100%" height="100%" version="1.1"xmlnsxmlns ="http://www.w3.org/2000/svg">="http://www.w3.org/2000/svg"><<defsdefs >><<radialGradientradialGradient id="id=" greygrey _blue" _blue" cxcx ="20%" cy="40%" r="50%" ="20%" cy="40%" r="50%"

fxfx ="50%" ="50%" fyfy ="50%">="50%"><stop offset="0%" style="stop<stop offset="0%" style="stop -- color:rgb(200,200,200);stopcolor:rgb(200,200,200);stop --

opacity:0"/>opacity:0"/><stop offset="100%" style="stop<stop offset="100%" style="stop -- color:rgb(0,0,255);stopcolor:rgb(0,0,255);stop --

opacity:1"/>opacity:1"/></</ radialGradientradialGradient >></</ defsdefs >><ellipse <ellipse cxcx ="230" cy="200" rx="110" ="230" cy="200" rx="110" ryry ="100"="100"style="fill:style="fill: urlurl (#(# greygrey _blue)"/>_blue)"/></</ svgsvg >>

Newer phones come with SVG built in Newer phones come with SVG built in

21

JavaScriptJavaScript Invented by Netscape Communications Cross Platform, Object-based, Scripting Language ECMAScript (ECMA-262)

JavaScriptJavaScript

Client runs JavaScript

HTTP Request

HTTP Response

HTML file withembedded JavaScript

22

JavaScriptJavaScript All Client Side Can�Adjust HTML�Open Windows, Resize Windows�Animations, Play Sounds Cannot�Access File System�Do Networking

JavaScriptJavaScript Advantages�Better User Experience Disadvantages� Thicker Client�Possible Abuse (Pop-up browser window)

23

Generate Dynamic HTMLGenerate Dynamic HTML... <BODY><BODY>

...Regular HTML Here.......Regular HTML Here....

<SCRIPT TYPE="text/<SCRIPT TYPE="text/ javascriptjavascript ">"><!<! ----

BUILD HTML HERE!!!BUILD HTML HERE!!!//// ---- >></SCRIPT></SCRIPT>

...More Regular HTML.......More Regular HTML....</BODY></BODY>

document.write(document.write(��StringString��))<HTML><HTML><HEAD><TITLE>Hello!</TITLE></HEAD><HEAD><TITLE>Hello!</TITLE></HEAD><BODY><BODY>

<H1> First JavaScript Page </H1><H1> First JavaScript Page </H1><SCRIPT TYPE="text/<SCRIPT TYPE="text/ javascriptjavascript ">"><!<! ----

document.write("<HR/>");document.write("<HR/>");document.write("Hello WWW!");document.write("Hello WWW!");document.write("<HR/>");document.write("<HR/>");

//// ---- >></SCRIPT></SCRIPT>

</BODY></BODY></HTML></HTML>

24

document.write(document.write(��StringString��))

ExampleExample<html><html><head><head><title> JavaScript 1 </title><title> JavaScript 1 </title><script language="JavaScript"><script language="JavaScript">document.write("<h1>document.write("<h1> TodaysTodays date. </h1>");date. </h1>");

document.write(Date());document.write(Date());</script></script></head></head><body><body>This is the rest of the page.This is the rest of the page.</body></body></html></html>

25

Modified exampleModified example<html><html><head><head><title> JavaScript 1 </title><title> JavaScript 1 </title><script language="JavaScript"><script language="JavaScript">varvar s = "Hello ";s = "Hello ";document.write(s);document.write(s);

document.write(Date());document.write(Date());document.write("<document.write("< brbr ><h1>" + s + "</h1>");><h1>" + s + "</h1>");</script></script></head></head><body><body>This is the rest of the page.This is the rest of the page.</body> </html></body> </html>

ExampleExample<script><script>function inform(){function inform(){alert("You have activated me by clicking alert("You have activated me by clicking

the grey button! Note that the event the grey button! Note that the event handler is added within the event that handler is added within the event that it handles, in this case, the form it handles, in this case, the form button event tag")button event tag")

}}</script></script>

<form><form><input type="button" name="test" <input type="button" name="test"

value="Click me" value="Click me" onclickonclick ="inform()">="inform()"></form></form>

26

Example Example onclickonclick EventEvent<form name="go"><form name="go"><input type="radio" name="C1" <input type="radio" name="C1"

onclickonclick ="document.="document. bgColorbgColor ='=' lightbluelightblue '">'"><input type="radio" name="C2" <input type="radio" name="C2"

onclickonclick ="document.="document. bgColorbgColor ='=' lightyellowlightyellow '">'"><input type="radio" name="C3" <input type="radio" name="C3"

onclickonclick ="document.="document. bgColorbgColor ='=' lightgreenlightgreen '">'"></form></form>

ReferencesReferences

International Open Source NetworkUNDP� http://www.apdip.net/publications/fosseprimers/

Next LectureNext Lecture

June 28th 2008