A History of Markup Languages from the Stone
- Slides: 94
A History of Markup Languages from the Stone Age to the Present with IDMS Examples Above: A map showing Homer’s view of the world from the Cartographic Images website at http: //www. henry-davis. com/MAPS/Ancient%20 Web%20 Pages/105. html Bob Currie / fidrecd 3@earthlink. net
Abstract This is a Markup Language “Travel Guide” for IDMS users, project leaders, application designers, and programmers. Its goal is to keep the IDMS Community updated on the many fast-paced changes occurring in the world of HTML, WML, and XML.
What are Markup Languages? • They are: – A product of the computer age – A set of conventions defining things like • What marks (elements) are allowed • Where elements may occur • If any or all elements must occur
There are 2 types of markup languages • Procedural – Rich Text Format (RTF), etc. • Generalized – HTML – WML
• Procedural markup is used in typesetting and publishing systems • The elements are placed within the text • The markup languages have these characteristics: – PMLs contain clear instructions for the document-rendering program so that it produces output of the original content in a particular format and style – The formatting instructions are likely to be specific to the output medium so the marked up document is not portable across different output media. See the RTF below. • CA-IDMS Welcome to the world of the IUA. • • viewkind 4uc 1pardf 0fs 24par bfs 48 CA-IDMSpar b 0Ifs 24\par Welcome to the world of the IUA. bi 0fs 48par
Procedural vs. Generalized • Procedural Markup Languages work well – If your documents will always go to the printed page or some other specific medium – Other examples: Post. Script and Te. X • PMLs are not suited, however, if you intend to do any processing on the document, such as extracting data. For that, consider using a Generalized Markup Language.
GMLs • Generalized markup languages have these traits: – The elements have logical names rather than expressing detailed formatting instructions – Applications that can read GML documents are free to present them as they see fit, using formatting rules that are either defined internally or somewhere else. – Probably the most commonly used GML is HTML.
A Generalized Example (HTML) CA-IDMS Welcome to the world of the IUA. • <HTML> • <H 1>CA-IDMS</H 1> • <EM>Welcome to the world of the IUA. </EM> • </HTML> � Easier to read (elements are more clearly defined; use of start and end tags) �No hint about how the document should be presented
GML Rule-sets • Each GML has its own • GMLs are written elements, rules, and using Generalized area of application Markup Rule-sets, or GMRS, which are • In order to function as sometimes called a language, these rules meta-languages. must be defined
In the beginning was the disparate Word • Markup languages arose in the 1960’s • From efforts that began at IBM and ended at ANSI and ISO came SGML – Note that SGML is not used to mark up documents – It is a meta-language used to create markup languages suitable for specific application areas
Design Principles • Emphasizes separating formatting instructions from content • Names of the elements describe what their content represents • A “Document Type Definition” (DTD) is used to define the valid elements for a particular GML. • Separation is done via stylesheets • You can usually have several stylesheets for outputting content to a variety of output devices.
SGML Applications • Doc. Book - an SGML application designed by the Association of American Publishers (AAP) • Computer-aided Acquisition and Logistic Support (CALS) - a DTD for technical manuals in the format required by the Do. D • Hypertext Markup Language (HTML) - the DTD used to describe content in a web document.
Taking IDMS to the Web • Initially, HTML held the greatest interest to the IDMS community because it could easily push data out to the Web. • • • Home -grown apps Inner. Access Jasmin/Opal Proprietary packages TN Bridge Vegasoft Web Server
• Ultimately, however, the early versions of HTML proved to be too primitive and unruly.
• Because of its ease of use, and despite the lack of conformity mentioned above, it continues to evolve as page authors demand more precision and greater complexity. HTML’s evolution is the subject of the rest of this presentation. • 1) “Beginning XHTML”, Boumphrey, Frank, et al, Wrox Press, 2000, page 27.
It’s good points: • Easy to learn • Very forgiving
It’s bad points: ð Sloppy, inconsistent, imprecise ð HTML code and your data are scrambled together
Other gripes - Part 1: • The web page is too static. Users can’t directly manipulate and access text and images. • “This might seem like no big deal, as most operating systems have boasted this for years, but in web pages it’s quite a major advance. ” 1 ---. – Dynamic HTML addresses this issue. • 1 “Instant Netscape Dynamic HTML NC 4 Edition”, Homer, Alex, and Chris Ullman, Wrox Press, 1997, p. 9.
Other gripes - Part 2: • Zillions of Web pages are marked up with nondescriptive tags. The best that a search engine can do is read the text. It would also be nice if the language could do more than just markup documents. And it should do all of this while retaining as much of HTML’s simplicity as possible.
Other gripes - Part 3: • New user-agents (cell phones, cars, palm held planners) don’t have the resources to figure out bad or vague markup code.
More whining about HTML shortcomings <HTML> …this tag and its ending tag </HTML> tell the browser that the enclosed document is all HTML. Most browsers can figure this out on their own, so you can drop them if you like living on the edge. <HEAD> …these tags group various header items together (meta, title, etc. ). Since the browsers can figure this stuff out on their own, you can also drop these tags. </HEAD>
A final whine. . . <BODY BGCOLOR="#000000" TEXT="#FFFFFF”> <FONT SIZE="3" FACE="ARIAL"> <B><I> How many database people does it take to change a light bulb? </b></i> …the HTML standards says surrounding tags should be consistent: <B><I> --- </I></b>: the outer tags always on the outside; the inner always on the inside. Note that HTML doesn’t enforce this. And that HTML is not fussy about case.
So let’s meet Mr. HTML • Some folks (especially XML-ers), think this portrait sums up the HTML world very well.
Let’s assume that the demise of HTML, like that of the mainframe, is a bit premature. . . • To begin, let’s look at a few of the basic ingredients; • Then let’s look at how those ingredients are evolving; • And finally, let’s see how they blend with various tools to take IDMS to the Web.
The World of HTML
A Web-page skeleton for HTML • • <!doctype html public “-//w 3 c//dtd html 4. 01//en> <HTML> <HEAD> <TITLE> New Document </TITLE> – – <META NAME="Generator" CONTENT="Edit. Plus"> <META NAME="Author" CONTENT="Bob Currie"> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> • </HEAD> • • <BODY> -Graphics, text, tables, forms, and URLs all go inside the <BODY> tag. </BODY> </HTML>
HTML’s Basic Structure • Document Structure • Tag Structure • <HTML> – identifies your document to the browser as HTML • Header – various tags, such as <TITLE>, then </HEAD> • Body – many tags and attributes (most of your code goes here) • End tags for Body, HTML • < this starts a tag • “nnnn” this names the tag. It may be ………. . followed by multiple attributes • > this ends the tag • Examples: – <TABLE> – <FORM name=IUA action=http: //www. iuassn. com/ method=get> – <INPUT type=text size=8 – value= 11/14/01 – name=date_of_IUA_workshop>
More about Tables. . . • They’re the easiest way to keep things lined up. • You’ll probably use several tables per map: one for header info, one for data, and perhaps one for footer info. • Remember that complex tables, like big images, take longer to download.
Here’s an example of a table using pull-down boxes & input fields. •
Forms. . . • FORM Example: FORM Structure: Êdeclare start of FORM and give attributes Ëadd input fields & buttons via tables, etc. Ìdeclare end of FORM – <FORM name=my IDMS -map action=call a cgi script, run a JSP, etc. – method (either “get” or “post” – > – input fields (check boxes, pull-down menus, etc. – tables (your individual input fields can be placed inside individual table cells) – </FORM>
• <FONT SIZE="3" FACE="ARIAL"> • <B><I>How many DBAs does it take to change a light bulb? </I></B> • <HR> • <h 2>It takes three: </h 2> • <li>One to write the light bulb removal program, • <li>one to write the light bulb insertion program, • <li>and one to act as the light bulb administrator --- to make sure that nobody else tries to change the light bulb at the same time. • </FONT> Stylesheets. . .
Multimedia & other neat stuff • <embed src=“http: //diamond. boisestate. edu/gas/utopia/your_born. mid” autostart=“true” width =“ 200” height=“ 200” /> Similar code handles video files.
“First Your Born” - G & S 1 First you're born--and I'll be bound you Find a dozen strangers round you. "Hallo, " cries the new-born baby, "Where's my parents? which may they be? " Awkward silence--no reply-Puzzled baby wonders why! Father rises, bows politely-Mother smiles (but not too brightly)-Doctor mumbles like a dumb thing-Nurse is busy mixing something. -Every symptom tends to show You're decidedly de trop-- 1) http: //diamond. boisestate. edu/gas/utopia/html/your_born. html
META tags for Search Engines • These are the superstar tags when it comes to getting your site listing by search engines such as Yahoo!, Google, Alta. Vista, etc. Netbots
META tag examples • <meta name=“revisit-after” content=“ 7 days”> • <meta name=“robots” content=“index, follow”> • The “revisit” tag means you want the search engine to come back to your site in the number of days specified. • “Index, follow” tells the netbot to start cataloging with the specific page and follow the links on that page through the rest of the site. • Here’s the opposite of the “follow tag”: – <meta name=“robots” content=“noindex, nofollow”>
Still, like the ancient highways below, HTML was too limited. • An early roadmap of the imperial highways of ancient Rome, covering roughly the area from southeastern England to present day Sri Lanka.
Dynamic HTML provides these new features: • For CSS (Cascading Style Sheets), more control • Absolute positioning using X, Y and Z coordinates in either style sheets or Java. Script • Dynamic redrawing of any or all parts of the page without having to reload the entire page. • More programmability using the DOM (Document Object Model) and Java. Script • New event-handling techniques • Canvas mode --- view the window or HTML page in a full-screen mode.
Getting the feel of DHTML • Remember the HTML • The best Web site for learning DHTML is “blink” command that the Word Wide Web’s page authors over-used “school” site: so much way back when? • Here’s an example of the site and it’s • Dynamic HTML has teaching techniques. the potential to be just as obnoxious if not used with restraint. • http: //www. w 3 schools. com/dhtml/tryit. asp? filename=trydhtml_earthquake
Some folks gave up on HTML/DHTML and created a whole new language --- XML. A map of Mars from JPL and NASA. With the development of XML, we begin moving toward the future at warp speed.
Why XML? What does it bring to the table? • Gives precise control. • Eliminates the need for multiple versions of the same page to accommodate varying user agents - one XML page will work for all. • Offers great integration of Multi. Media. • The Mozquito Factory.
How XML differs from HTML • You must provide a DTD declaration at the top of the file: <!DOCTYPE PUBLIC “-//W 3 C/DTD XHTML 1. 0 Strict//EN” “”>. • You must include a reference to the XML namespace in the <html> element: <html xmlns=“http: //www. w 3. org/TR/xhtml 1”>. • XML is case sensitive, and XHTML tag names and attribute names must be given in lower case. • You must close tags and indicate empty elements. Tags must also nest properly. • You may not omit <head> and <body> elements. The first element in the <head> must be the <title> element. • All attributes must be enclosed in quotation marks: <input checked=“checked”>.
Backwards compatibility • Write empty elements like <br/> with a space between the tag name and the slash, as in . (This is preferable to </br>, ). • Don’t have new lines or lots of white space within attribute values because different user-agents do different things to them. • The “name” attribute has been replaced with the “id” attribute, but not all browsers support the latter. The best option is to include both, making sure their values are identical. For example: <a name=“iua” id=“iua”> … </a>.
But even that wasn’t enough --- all of a sudden there were WAPs. WAP = Wireless Application Protocol WML = Wireless Markup Language WMLScript = a scripting language based on ECMAScript
Still, neither DHTML nor XML meet the needs of imode and wireless agents: • i. TV (set-top TV) • TV services with Internet access • WAPs • PDAs • ? ? Enter the Wireless Markup Language.
How does Mobile Communication Work? Wireless Request HTTP Response Wireless Response Mobile Client Internet Server WAP Gateway HTTP Request & Response Internet Client
WML Environment • WML was designed for creating applications • HTML was designed for creating documents • WML: unreliable, expensive networks and very limited devices • HTML: fast, cheap, reliable networks and powerful desktop computers
WML Users • Users are not likely to be reading long tracts; • “Time is money” - they usually are looking for a specific piece of information. • They want a high degree of interaction with short menu pages.
Cards and Decks • WML abolishes the ideas of a “page. ” • WML applications are composed of one of more “decks” containing collections of “cards”; • Each card typically contains some content that is displayed and some content that is used by the microbrowser to control how the user moves from one card to the next.
Application Document Deck Card
Bundling • By bundling related cards, we can send several to the microbrowser at once – so it doesn’t have to ask for a new card from the server every time the user tries to move from one to another – this in turn can save a great deal of time
<? xml version="1. 0"? > <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1. 1//EN" "http: //www. wapforum. org/DTD/wml_1. 1. xml"> <wml> <card id="SSN" title="SSN: "> <do type="accept" label="Results"> <go href="WMLScript. Example. wmls#validate. SSN($(SSN))"/> </do> <p>Enter SSN: <input type="text" name="SSN"/> </p> </card> <card id="Results" title="Results: "> <p> You entered: <br/>SSN: $(SSN)<br/></p> </card> An Example of </wml> WMLScript: Listing #1
Listing #2 extern function validate. SSN(SSN) { if (String. length(SSN) != 9) { WMLBrowser. set. Var("SSN", "Error: String must be 9 digits long. "); } WMLBrowser. go("WMLScript. Example. wml#Results"); };
In the left hand picture, the user has entered an 8 digit Social Security number. In the righthand picture, the unit has put out an error message because the SSN must be 9 -digits long.
Building a WAP web site - Part 1 • Some retailers are modifying their sites for WAP, while others are thinking of developing a specific WAP site. • Many phones won’t load pages over a certain size. • Keep graphics to a minimum --- use only gif’s, jpeg’s, and bmp’s. • Navigation may be limited to arrow keys. • Limit input --- some keyboards are crude.
Building a WAP web site - Part 2 • Most important of all, none of the IDMS-to-the. Web tools discussed in this presentation can build you a WML page without considerable jerryrigging. • But in case a WAP website is in your company’s future, here’s some additional reading : – www. iwks. com – http: //www. wapinsight. com/
CA-World 2002 Presentations on the Emerging Wireless Technology • For growth projections and e-biz strategies, take a look at these presentations: – Wireless Technologies and Trends (Session code: GW 300 SN) – Mobile e. Business Strategy Initiatives (Session code: AP 102 SR) – Developing Your Wireless Applications Workshop (Session code: GW 222 LS) • All 3 can be downloaded from www. caworld. com
Wait a minute!!! • Q) If none of the IDMS-to-the-Web tools currently handle WML, why are talking about it? • A) Look at the growth rates. Mobile users may soon outnumber PC-oriented surfers. In addition, it may be the next evolution of HTML --- as the WWW 3 tries to incorporate WML --- or something like it ---into the next version of HTML. • Ladies & Gents --- allow me to introduce (ta-duh!) XHTML!!
Why XHTML may be the next “super” language • • • Much more precise Much more rigid in what it will accept Much more flexible Separates data from coding Does SO much more And it will probably absorb whatever new wireless markup language becomes “standard”.
A Web page skeleton for XHTML • <!doctype html public “-//w 3 c//dtd xhtml 1. 0 Strict//en” “http: //www. w 3. org/TR/xhtml 1/dtd/strict. dtd”>> • <html xmlns=“http: //www. e 3. org/TR/xhtml”> • <HEAD> • <TITLE> New Document </TITLE> • <META NAME="Generator" CONTENT="Edit. Plus"> • <META NAME="Author" CONTENT="Bob Currie"> • <META NAME="Keywords" CONTENT=""> • <META NAME="Description" CONTENT=""> • • </HEAD> <BODY> </HTML>
Use Tidy. exe to convert HTML to XHTML • Dave Raggett, a member of the World Wide Web Consortium, has created a utility called “HTML Tidy” to help spot HTML-to -XML conversion errors. • The source code and binaries for a wide variety of platforms are available at: http: //tidy. sourceforge. net
Use Tidy. exe to convert HTML to XHTML • HTML Tidy is run from the command line such as a DOS window. • To check a document using this utility, type “tidy. exe” and the name of the file to check. • If you include the -errors option, Tidy will display a report of errors. • Additional options indent, force tags into uppercase, and much more.
“HTML Tidy” Examples • Adding the missing "/" in end tags for anchors: • <a href="#refs">References<a> • Tidy maps this to • <a href="#refs">References</a>
Other “HTML Tidy” functions • Limited support for ASP, JSTE, and PHP. • Allows you to burst a single HTML file into a number of linked slides. • Supports a configuration file. At last count, “HTML Tidy” offered over 50 options. • Can be run from Perl or other scripting languages. • Offers a choice of character encodings: US ASCII, ISO Latin-1, UTF-8, and the ISO 2022 family of 7 bit encodings.
The majority of IDMS-to-the-Web tools use HTML • • Inner. Access (Inner. Access Technologies) Jasmine (Computer Associates) Opal (Computer Asssociates) VEGA Webserver (Vegasoft, Inc. ) • A few, such as Information Builders, use proprietary languages
Mixing all this with Inner. Access & IDMS
Mixing all this with the VEGA Web Server & IDMS - Part 1
Mixing all this with the VEGA Web Server & IDMS - Part 2
Mixing all this with the CA’s Jasmineii & IDMS
An Application Using Vegasoft
ADS/O Code replacing a “Display” statement • • • • • DEFINE SUBROUTINE TABLINE. 00027700 !----------------------------00027800 ! DISPLAY TABLE DETAIL LINE FOR EACH THE TRADE CLASSES. 00027900 !----------------------------00028000 MOVE HTMLPAGE(WWWWPTR, 'BNZMT 935 -TABLINE', 1, 00028100 'HREF', BNZWE-VEGA-HREF, 00028200 'NAME', BNZWE-WORK-M 2135 -NAME(1), 00028300 'TYPE', BNZWE-WORK-M 2135 -TYPE(1), 00028400 'NUMBER', BNZWE-WORK-M 2135 -NUMBER(1), 00028500 'STATUS', BNZWE-WORK-M 2135 -STATUS(1)) 00028600 TO WWWWHTTP-STATUS. 00028800 IF WWWWHTTP-STATUS NE 200 00028900 DO. 00029000 MOVE CONCAT('<P> SYSTEM PROBLEMS. . TRY AGAIN LATER', 00029100 ' ERROR-STATUS: ', ERROR-STATUS) TO BNZWE-VEGA-MSG. 00029200 END. 00029300 GOBACK.
BCCO Application • Designed and built by the Information Technology Department of Miami. Dade County. • The application team: – Dalia Garcia del Rio – Gus Aviles – Mark D’Auilar • The complete ADS/O code and HTML modules for the main menu and the contractor screen are on the CD under HTML/Dade. Miami
BCCO: Things to look for • Uses Java. Script to validate user input to the Main Menu. • Uses a table of “hot links” to navigate.
Cuyahoga County - search
Cuyahoga County – search results
Blue Bird Corporation – Host sequence
Blue Bird Corporation – Host warranty claims inquiry
Blue Bird Corporation – Jasmine Web Application
Blue Bird Corporation – Jasmine Web Application
Blue Bird Corporation – Jasmine Host Integration Suite – Host Mapper
UNC
Information Resources A map of Bergen, Norway - 1588
HTML Classes & Reference Cards • A Free online HTML class: – http: //html. about. com/library/beginning/bl_htm lclass. htm • An HTML/XHTML Tag Library – http: //html. about. com/library/tags/bl_index. htm • A very complete HTML 4 Tag Reference: – http: //html. about. com/gi/dynamic/offsite. htm? si te=http%3 A%2 F%2 FWDVL. com%2 FAuthorin g%2 FHTML%2 F 4%2 FTags%2 F
W 3’s Documentation/Tools World Wide Web Consortium --- http: //www. w 3. org ---You can download the free HTMLTidy, exe from here W 3’s HTML Home Page --- http: //www. w 3. org/Mark. Up/ W@P Forum Wireless Application Protocol -- http: //www. wapforum. org/
Dynamic HTML • A truly great website for learning DHTML: – http: //html. about. com/gi/dynamic/offsite. htm? sit e=http%3 A%2 F%2 Fglassdog. com%2 Fdesign-orama%2 Fhtml%2 Findex. html • An example from Wrox Press’ “Instant Netscape Dynamic HTML NC 4 Edition” (Netscape 4 required): – http: //rapid. wrox. co. uk/books/1193/Buttons/Butt ons. htm
Important Websites for free HTML code and advice: • ABOUT. Com --- http: //www. about. com • HTML Goodies --http: //htmlgoodies. earthweb. cob/tutors/ • World Wide Web Consortium “School” --http: //www. w 3 schools. com/dhtml/default. asp
HTML editors CSS editors, optimizers, and other tools • Visit these sites for freeware & shareware: – http: //www. tucows. com/ – http: //www. zdnet. com/ – http: //www. cnet. com
Newsletters • ABOUT. com: – http: //html. about. com/gi/pages/mmail. htm • check out their “HTML Pet Peeves” page --- aggravating (and often sloppy) coding habits • Internet. com – http: //e-newsletters. internet. com/ • this site features about two dozen different webrelated newsletters
Recommended Books • “Instant Netscape Dynamic HTML”, Homer, Alex and Chris Ullman, Wrox Press, Inc, 1997. • “Mastering Visually HTML 4 & XHTML 1”, Murdock, Kelly, IDG Books, 2000. • “Beginning XHTML”, Boumphrey, Frank, et al, Wrox Press, Inc. , 2000. • “Java. Server Pages”, Bergsten, hans, O’Reilly & Associates, 2001.
Information on Web Robots • The Web Robots Pages: – http: //www. robotstxt. org/wc/robots. html
The Inner. Access webifier and platform bridge is a product of Jasmine and Opal are products of
TN Bridge is a product of Tiburon Technologies.
The Web Server is a product of It is distributed in Europe by: And in the USA by:
Questions & Answers
Clainlist
I made an airplane out of stone. ("stone airplane")
History of computer languages
Brief history of programming languages
Markup language examples
Language
Security assertion markup language definition
Markup price
Wml
Markup formula
Markup and markdown difference
Four firm concentration ratio
Parkin economics 12th edition
Markup language examples
Markup percentage
E language
Practice 6-9 markup and discount
Lightweight markup
Extra markup html
A grocery store has a 60 markup
Tips and markups
Traductor
It is a digital poetry that uses links and hypertext markup
Structural markup html
Geography markup language tutorial
What are semantic elements
City geography markup language
Extensible hypertext markup language
Darpa agent markup language
Xml extensible markup language
Markup on cost
Linguaggio di markup
Introduction of html
Darpa agent markup language
Salon retail markup
Xtensible markup language
Xtensible markup language
Semantic search vs cognitive search
Markup fiyatlama
Coding playground java
Language
Graph markup language
Multilingual semantical markup
Markup on flowers
Uiml
An html file is a text file containing small markup tags.
蔡顯明
Bandwidth extensible markup language
Hát kết hợp bộ gõ cơ thể
Frameset trong html5
Bổ thể
Tỉ lệ cơ thể trẻ em
Gấu đi như thế nào
Chụp phim tư thế worms-breton
Hát lên người ơi
Kể tên các môn thể thao
Thế nào là hệ số cao nhất
Các châu lục và đại dương trên thế giới
Công thức tính độ biến thiên đông lượng
Trời xanh đây là của chúng ta thể thơ
Cách giải mật thư tọa độ
Làm thế nào để 102-1=99
độ dài liên kết
Các châu lục và đại dương trên thế giới
Thể thơ truyền thống
Quá trình desamine hóa có thể tạo ra
Một số thể thơ truyền thống
Cái miệng nó xinh thế
Vẽ hình chiếu vuông góc của vật thể sau
Nguyên nhân của sự mỏi cơ sinh 8
đặc điểm cơ thể của người tối cổ
Thế nào là giọng cùng tên?
Vẽ hình chiếu đứng bằng cạnh của vật thể
Fecboak
Thẻ vin
đại từ thay thế
điện thế nghỉ
Tư thế ngồi viết
Diễn thế sinh thái là
Dot
Bảng số nguyên tố lớn hơn 1000
Tư thế ngồi viết
Lời thề hippocrates
Thiếu nhi thế giới liên hoan
ưu thế lai là gì
Khi nào hổ mẹ dạy hổ con săn mồi
Sự nuôi và dạy con của hươu
Hệ hô hấp
Từ ngữ thể hiện lòng nhân hậu
Thế nào là mạng điện lắp đặt kiểu nổi
History also history physical
Why do languages vary among places
What is assembler
Jumlah level dalam gambar ini adalah . . . .
Turing unrecognizable languages
